:root {
    --page-background: #050505;
    --page-background-soft: #0b0b0b;
    --hs-analytics-chart-text: #8f8f8f;
    --hs-analytics-chart-grid: rgba(255, 255, 255, 0.08);
    --hs-analytics-chart-content: #60a5fa;
    --hs-analytics-chart-ad: #fb923c;
    --hs-analytics-chart-share: #a78bfa;
    --hs-analytics-chart-save: #4ade80;
    --hs-analytics-chart-platform: #38bdf8;

    --surface: rgba(255, 255, 255, 0.055);
    --surface-hover: rgba(255, 255, 255, 0.085);
    --dashboard-tab-active: #ffffff;
    --surface-strong: rgba(255, 255, 255, 0.1);

    --header-background: rgba(8, 8, 8, 0.78);
    --footer-background: rgba(3, 3, 3, 0.72);

    --icerik-primary:#ff6b35;

    --icerik-text:#f3f3f3;
    --icerik-text-soft:#bfbfbf;
    --icerik-muted:#8d8d8d;

    --icerik-card:#111111;
    --icerik-soft:#1b1b1b;
    --icerik-border:#2b2b2b;

    --icerik-shadow:0 12px 35px rgba(0,0,0,.45);

    --icerik-modal-bg:#111111;
    --icerik-modal-shadow:0 20px 60px rgba(0,0,0,.55);

    --icerik-error:#ef4444;

    --border: rgba(255, 255, 255, 0.12);
    --border-hover: rgba(255, 255, 255, 0.22);

    --text: #ffffff;
    --text-muted: rgba(255, 255, 255, 0.68);
    --text-soft: rgba(255, 255, 255, 0.44);

    --input-background: rgba(0, 0, 0, 0.25);
    --input-background-focus: rgba(255, 255, 255, 0.055);

    --orange: #ff9900;
    --orange-light: #ffb13b;
    --orange-dark: #e67800;

    --green: #33b957;
    --red: #dc3545;
    --blue: #4388ff;
    --yellow: #f0b429;

    --content-width: 80%;
    --content-max-width: 1440px;

    --header-height: 76px;
    --radius-small: 12px;
    --radius-medium: 18px;
    --radius-large: 28px;

    --shadow-small: 0 12px 30px rgba(0, 0, 0, 0.24);
    --shadow-medium: 0 24px 70px rgba(0, 0, 0, 0.42);
    --shadow-large: 0 35px 100px rgba(0, 0, 0, 0.55);

    color-scheme: dark;
}

/* GENEL */

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

html {
    min-height: 100%;
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;

    display: flex;
    flex-direction: column;

    font-family: "Montserrat", Arial, sans-serif;

    background:
        var(--page-background);

    color: var(--text);
    overflow-x: hidden;
}

body,
button,
input,
select,
textarea {
    font-family: "Montserrat", Arial, sans-serif;
}

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

button,
select {
    cursor: pointer;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
}

button {
    border: none;
}

::selection {
    background: rgba(255, 153, 0, 0.32);
    color: #ffffff;
}

/* SAYFA YAPISI */

.dashboard-page {
    min-height: 100vh;

    display: flex;
    flex-direction: column;
}

.dashboard-main {
    width: var(--content-width);
    max-width: var(--content-max-width);

    flex: 1;

    margin: 0 auto;
    padding: 36px 0 52px;
}

.dashboard-content {
    width: 100%;
}

/* HEADER */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;

    width: 100%;
    min-height: var(--header-height);

    border-bottom: 1px solid var(--border);

    background: var(--header-background);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.2);
}

.header-inner {
    width: var(--content-width);
    max-width: var(--content-max-width);
    min-height: var(--header-height);

    margin: 0 auto;

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

.header-left,
.header-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.header-left {
    min-width: 0;
}

.header-right {
    justify-content: flex-end;
}

/* =========================================================
   HEADER HIZLI İŞLEMLER
   ========================================================= */

.header-action-nav {
    display: flex;
    align-items: center;
    gap: 8px;
}

.header-action-button {
    position: relative;

    width: 43px;
    height: 43px;

    display: grid;
    place-items: center;

    flex: 0 0 43px;

    border-radius: 14px;

    text-decoration: none;

    font-size: 15px;

    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.header-action-button:hover {
    transform: translateY(-1px);
}

.header-action-button:active {
    transform: translateY(0);
}

.header-action-button:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 2px;
}

.header-notification-badge {
    position: absolute;
    top: -6px;
    right: -7px;

    min-width: 21px;
    height: 21px;

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

    padding: 0 5px;

    border-radius: 999px;

    font-size: 9px;
    line-height: 1;
    font-weight: 700;

    letter-spacing: -.2px;

    pointer-events: none;
}

.header-notification-badge[hidden] {
    display: none;
}

.header-action-button {
    border: 1px solid rgba(255,255,255,.10);

    background: rgba(255,255,255,.05);
    color: rgba(255,255,255,.70);
}

.header-action-button:hover {
    border-color: rgba(255,153,0,.35);

    background: rgba(255,255,255,.10);
    color: #ffffff;
}

.header-add-button {
    color: #ff9900;
}

.header-add-button:hover {
    background: rgba(255,153,0,.12);
}

.header-notification-button.has-unread {
    color: #ff9900;

    border-color: rgba(255,153,0,.35);

    background: rgba(255,153,0,.10);
}

.header-notification-badge {
    border: 2px solid #1f1f1f;

    background: #e54857;
    color: #ffffff;

    box-shadow:
        0 5px 14px rgba(229,72,87,.35);
}

.site-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    flex-shrink: 0;

    color: var(--text);
}

.site-brand-logo {
    width: 44px;
    height: 44px;

    display: block;
    object-fit: contain;

    border-radius: 13px;

    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.25));
}

.site-brand-text {
    color: var(--text);

    font-size: 21px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: -0.7px;
}

.header-nav {
    display: flex;
    align-items: center;
    gap: 8px;
}

.header-nav-link {
    min-height: 42px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 0 14px;

    border: 1px solid transparent;
    border-radius: 13px;

    color: var(--text-muted);

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

    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.header-nav-link:hover,
.header-nav-link.active {
    color: var(--text);

    border-color: var(--border);
    background: var(--surface-hover);
}

.header-nav-link:hover {
    transform: translateY(-1px);
}

.header-action {
    min-height: 42px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 0 15px;

    border: 1px solid var(--border);
    border-radius: 13px;

    background: var(--surface);
    color: var(--text);

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

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.header-action:hover {
    border-color: rgba(255, 153, 0, 0.42);
    background: rgba(255, 153, 0, 0.1);
    color: var(--orange-light);

    transform: translateY(-1px);
}

.logout-link {
    color: #ff9aa3;
}

.logout-link:hover {
    border-color: rgba(220, 53, 69, 0.42);
    background: rgba(220, 53, 69, 0.1);
    color: #ffc0c6;
}

/* MOBİL MENÜ BUTONU */

.mobile-menu-button {
    width: 43px;
    height: 43px;

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

    border: 1px solid var(--border);
    border-radius: 13px;

    background: var(--surface);
    color: var(--text);

    font-size: 21px;
}

/* SAYFA BAŞLIĞI */

.page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;

    margin-bottom: 28px;
}

.profile-dropdown {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    z-index: 300;

    width: 265px;

    padding: 9px;

    border: 1px solid var(--border);
    border-radius: 19px;

    background: var(--page-background);
    color: var(--text);

    box-shadow: var(--shadow-large);

    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);

    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.98);
    transform-origin: top right;

    transition:
        opacity 0.18s ease,
        visibility 0.18s ease,
        transform 0.18s ease;
}

.page-title-group {
    min-width: 0;
}

.page-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 10px;

    color: var(--orange-light);

    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.page-eyebrow::before {
    content: "";

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: var(--orange);
    box-shadow: 0 0 17px rgba(255, 153, 0, 0.9);
}

.page-title {
    color: var(--text);

    font-size: clamp(28px, 3vw, 42px);
    line-height: 1.08;
    font-weight: 700;
    letter-spacing: -1.5px;
}

.page-description {
    max-width: 720px;

    margin-top: 10px;

    color: var(--text-muted);

    font-size: 14px;
    line-height: 1.75;
    font-weight: 500;
}

/* KARTLAR */

.dashboard-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-large);

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.075),
            rgba(255, 255, 255, 0.035)
        );

    box-shadow: var(--shadow-medium);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.dashboard-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    padding: 21px 24px;

    border-bottom: 1px solid var(--border);
}

.dashboard-card-title {
    color: var(--text);

    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.4px;
}

.dashboard-card-description {
    margin-top: 5px;

    color: var(--text-muted);

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

.dashboard-card-body {
    padding: 24px;
}

/* FORM ALANLARI */

.form-group {
    display: grid;
    gap: 8px;
}

.form-label {
    padding-left: 2px;

    color: var(--text);

    font-size: 12px;
    font-weight: 600;
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;

    outline: none;

    border: 1px solid var(--border);
    border-radius: 15px;

    background: var(--input-background);
    color: var(--text);

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

    transition:
        border-color 0.2s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease;
}

.form-input,
.form-select {
    min-height: 52px;
    padding: 0 15px;
}

.form-textarea {
    min-height: 130px;
    padding: 15px;

    resize: vertical;
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--text-soft);
}

.form-input:hover,
.form-select:hover,
.form-textarea:hover {
    border-color: var(--border-hover);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    border-color: var(--orange);

    background: var(--input-background-focus);

    box-shadow:
        0 0 0 4px rgba(255, 153, 0, 0.11);
}

.form-select option {
    background: #171717;
    color: #ffffff;
}

/* BUTONLAR */

.button {
    min-height: 46px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    padding: 0 18px;

    border: 1px solid transparent;
    border-radius: 14px;

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

    transition:
        transform 0.2s ease,
        filter 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease;
}

.button:hover {
    transform: translateY(-2px);
}

.button-primary {
    background:
        linear-gradient(
            135deg,
            #ffad25 0%,
            #ff8c00 52%,
            #e67800 100%
        );

    color: #111111;

    box-shadow:
        0 15px 34px rgba(255, 142, 0, 0.2);
}

.button-primary:hover {
    filter: brightness(1.06);
}

.button-secondary {
    border-color: var(--border);

    background: var(--surface);
    color: var(--text);
}

.button-secondary:hover {
    border-color: var(--border-hover);
    background: var(--surface-hover);
}

.button-danger {
    border-color: rgba(220, 53, 69, 0.35);

    background: rgba(220, 53, 69, 0.11);
    color: #ffabb3;
}

.button-danger:hover {
    border-color: rgba(220, 53, 69, 0.58);
    background: rgba(220, 53, 69, 0.17);
}

/*
    FLASH MESAJLARI

    Bu renkler açık ve koyu temada aynı kalacaktır.
*/

.flash-container {
    width: 100%;

    display: grid;
    gap: 10px;

    margin-bottom: 22px;
}

.flash-message {
    position: relative;

    width: 100%;

    display: flex;
    align-items: flex-start;
    gap: 12px;

    padding: 14px 17px;

    border: 1px solid transparent;
    border-radius: 15px;

    font-size: 13px;
    line-height: 1.55;
    font-weight: 600;

    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18);
}

.flash-message::before {
    width: 22px;
    height: 22px;

    flex: 0 0 22px;

    display: grid;
    place-items: center;

    border-radius: 50%;

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

.flash-success {
    border-color: rgba(51, 185, 87, 0.42);
    background: #102c19;
    color: #c2f7ce;
}

.flash-success::before {
    content: "✓";

    background: #33b957;
    color: #ffffff;
}

.flash-error,
.flash-danger {
    border-color: rgba(220, 53, 69, 0.48);
    background: #321317;
    color: #ffc4ca;
}

.flash-error::before,
.flash-danger::before {
    content: "!";

    background: #dc3545;
    color: #ffffff;
}

.flash-warning {
    border-color: rgba(240, 180, 41, 0.48);
    background: #33270f;
    color: #ffe5a6;
}

.flash-warning::before {
    content: "!";

    background: #f0b429;
    color: #151515;
}

.flash-info {
    border-color: rgba(67, 136, 255, 0.48);
    background: #102344;
    color: #c8dcff;
}

.flash-info::before {
    content: "i";

    background: #4388ff;
    color: #ffffff;
}

/* FOOTER */

.site-footer {
    width: 100%;

    margin-top: auto;
    padding: 30px 0;

    border-top: 1px solid var(--border);

    background: var(--footer-background);
    color: var(--text-muted);
}

.footer-inner {
    width: var(--content-width);
    max-width: var(--content-max-width);

    margin: 0 auto;

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

    flex-wrap: wrap;
}

.footer-brand-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    color: var(--text);

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

.footer-brand-logo {
    width: 34px;
    height: 34px;

    object-fit: contain;
}

.footer-copyright {
    color: var(--text-soft);

    font-size: 11px;
    line-height: 1.55;
    font-weight: 500;
}

.footer-links {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 18px;

    flex-wrap: wrap;
}

.footer-link {
    color: var(--text-muted);

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

    transition: color 0.2s ease;
}

.footer-link:hover {
    color: var(--orange-light);
}

/* BOŞ DURUM */

.empty-state {
    padding: 50px 24px;

    text-align: center;

    border: 1px dashed var(--border-hover);
    border-radius: var(--radius-large);

    background: var(--surface);
}

.empty-state h3 {
    margin-bottom: 9px;

    color: var(--text);

    font-size: 19px;
    font-weight: 600;
}

.empty-state p {
    color: var(--text-muted);

    font-size: 13px;
    line-height: 1.7;
}

/* RESPONSIVE */

@media (max-width: 1100px) {
    :root {
        --content-width: 90%;
    }
}

@media (max-width: 820px) {
    :root {
        --content-width: calc(100% - 28px);
    }

    .header-inner {
        gap: 14px;
    }

    .site-brand-text {
        font-size: 18px;
    }

    .header-nav {
        display: none;
    }

    .mobile-menu-button {
        display: inline-flex;
    }

    .page-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .dashboard-main {
        padding-top: 26px;
    }
}

@media (max-width: 560px) {
    :root {
        --content-width: calc(100% - 22px);
        --header-height: 68px;
    }

    .site-brand-logo {
        width: 39px;
        height: 39px;
    }

    .site-brand-text {
        font-size: 17px;
    }

    .header-action {
        min-height: 40px;
        padding: 0 12px;

        font-size: 11px;
    }

    .dashboard-card {
        border-radius: 22px;
    }

    .dashboard-card-header,
    .dashboard-card-body {
        padding: 19px;
    }

    .footer-inner {
        flex-direction: column;
        justify-content: center;

        text-align: center;
    }

    .footer-brand-wrapper {
        align-items: center;
    }

    .footer-links {
        justify-content: center;
    }
}

/* =========================================================
   İÇERİK KARTI - KOYU TEMA
   ========================================================= */

.icerik-kart {
    --icerik-kart-bg: rgba(255, 255, 255, 0.045);
    --icerik-kart-bg-hover: rgba(255, 255, 255, 0.062);

    --icerik-kart-border: rgba(255, 255, 255, 0.105);
    --icerik-kart-border-strong: rgba(255, 255, 255, 0.17);

    --icerik-kart-text: #ffffff;
    --icerik-kart-muted: rgba(255, 255, 255, 0.67);
    --icerik-kart-soft: rgba(255, 255, 255, 0.43);

    --icerik-kart-surface: rgba(255, 255, 255, 0.07);
    --icerik-kart-surface-hover: rgba(255, 255, 255, 0.11);

    --icerik-kart-orange: #ff9900;
    --icerik-kart-green: #20b26b;

    --icerik-cok-uygun: #5fa85a;
    --icerik-uygun: #3f5f14;
    --icerik-pahali: #c8172d;
    --icerik-cok-pahali: #850015;

    position: relative;

    width: 100%;

    padding: 18px;

    border: 1px solid var(--icerik-kart-border);
    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.057),
            rgba(255, 255, 255, 0.027)
        );

    box-shadow:
        0 20px 55px rgba(0, 0, 0, 0.25);

    color: var(--icerik-kart-text);

    overflow: visible;

    transition:
        border-color 0.2s ease,
        background-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.icerik-kart:hover {
    border-color: var(--icerik-kart-border-strong);

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.073),
            rgba(255, 255, 255, 0.035)
        );

    box-shadow:
        0 24px 65px rgba(0, 0, 0, 0.31);
}

/* Kart listesi */

.icerik-kart-listesi {
    width: 100%;

    display: grid;
    gap: 22px;
}

/* =========================================================
   KART ÜST BİLGİ
   ========================================================= */

.icerik-kart-header {
    position: relative;
    z-index: 20;

    width: 100%;

    display: flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 14px;
}

.icerik-kart-kullanici {
    min-width: 0;

    display: inline-flex;
    align-items: center;
    gap: 9px;

    color: var(--icerik-kart-text);
}

.icerik-kart-profil {
    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    display: grid;
    place-items: center;

    overflow: hidden;

    border: 1px solid var(--icerik-kart-border);
    border-radius: 50%;

    background: var(--icerik-kart-surface);
    color: var(--icerik-kart-text);

    font-size: 12px;
    font-weight: 600;
}

.icerik-kart-profil img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}

.icerik-kart-kullanici-bilgisi {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 3px;
}

.icerik-kart-username {
    max-width: 250px;

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

    color: var(--icerik-kart-text);

    font-size: 13px;
    line-height: 1.2;
    font-weight: 600;

    transition: color 0.2s ease;
}

.icerik-kart-kullanici:hover .icerik-kart-username {
    color: var(--icerik-kart-orange);
}

.icerik-kart-kullanici-alt {
    max-width: 260px;

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

    color: var(--icerik-kart-soft);

    font-size: 10px;
    line-height: 1.2;
    font-weight: 600;
}

.icerik-kart-takip-durumu {
    width: 17px;
    height: 17px;

    flex: 0 0 17px;

    display: grid;
    place-items: center;

    margin-left: 1px;

    border-radius: 50%;

    background: var(--icerik-kart-green);
    color: #ffffff;

    font-size: 9px;
}

.icerik-kart-header-spacer {
    flex: 1;
}

.icerik-kart-zaman {
    flex: 0 0 auto;

    color: var(--icerik-kart-soft);

    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
}

/* =========================================================
   ÜÇ NOKTA MENÜ
   ========================================================= */

.icerik-kart-menu {
    position: relative;

    flex: 0 0 auto;
}

.icerik-kart-menu-button {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    border: 1px solid transparent;
    border-radius: 12px;

    background: transparent;
    color: var(--icerik-kart-muted);

    font-size: 18px;

    transition:
        color 0.2s ease,
        border-color 0.2s ease,
        background-color 0.2s ease;
}

.icerik-kart-menu-button:hover,
.icerik-kart-menu-button[aria-expanded="true"] {
    border-color: var(--icerik-kart-border);

    background: var(--icerik-kart-surface);
    color: var(--icerik-kart-text);
}

/*
    Dropdown içeriğini sayfaya göre biz dolduracağız.
    Burada yalnızca ortak görünüm tanımlanıyor.
*/

.icerik-kart-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 100;

    width: 190px;

    display: grid;
    gap: 4px;

    padding: 8px;

    border: 1px solid var(--icerik-kart-border);
    border-radius: 16px;

    background: rgba(37, 37, 37, 0.97);

    box-shadow:
        0 22px 60px rgba(0, 0, 0, 0.48);

    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);

    opacity: 0;
    visibility: hidden;

    transform: translateY(-7px) scale(0.98);
    transform-origin: top right;

    transition:
        opacity 0.18s ease,
        visibility 0.18s ease,
        transform 0.18s ease;
}

.icerik-kart-dropdown.open {
    opacity: 1;
    visibility: visible;

    transform: translateY(0) scale(1);
}

.icerik-kart-dropdown-item {
    width: 100%;
    min-height: 42px;

    display: flex;
    align-items: center;
    gap: 10px;

    padding: 0 11px;

    border: none;
    border-radius: 11px;

    background: transparent;
    color: var(--icerik-kart-muted);

    text-align: left;

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

    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        transform 0.2s ease;
}

.icerik-kart-dropdown-item:hover {
    background: var(--icerik-kart-surface-hover);
    color: var(--icerik-kart-text);

    transform: translateX(2px);
}

.icerik-kart-dropdown-item i {
    width: 23px;

    text-align: center;

    color: var(--icerik-kart-orange);
}

.icerik-kart-dropdown-item.danger {
    color: #ff8e99;
}

.icerik-kart-dropdown-item.danger i {
    color: #ff5667;
}

.icerik-kart-dropdown-item.danger:hover {
    background: rgba(220, 53, 69, 0.12);
    color: #ffadb5;
}

.icerik-kart-dropdown-divider {
    height: 1px;

    margin: 4px 5px;

    background: var(--icerik-kart-border);
}

/* =========================================================
   ORTA ALAN
   Görseller %60, bilgi alanı %40
   ========================================================= */

.icerik-kart-orta {
    width: 100%;

    display: grid;
    grid-template-columns: minmax(0, 60fr) minmax(0, 40fr);
    gap: 18px;

    align-items: stretch;
}

/* =========================================================
   GÖRSEL ALANI
   ========================================================= */

.icerik-kart-gorsel-alani {
    position: relative;

    width: 100%;
    min-width: 0;
    height: 320px;

    overflow: hidden;

    border-radius: 19px;
}

.icerik-kart-gorsel-track {
    width: 100%;
    height: 100%;

    display: flex;
    gap: 5%;

    overflow-x: auto;
    overflow-y: hidden;

    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;

    scrollbar-width: none;
    -ms-overflow-style: none;
}


.icerik-kart-gorsel-track::-webkit-scrollbar {
    display: none;
}

/*
    Her görsel, bulunduğu görsel sütununun %80'ini kaplar.
    %5 boşluk bırakılır, sonraki görselin yaklaşık %15'i görünür.
*/

.icerik-kart-gorsel {
    position: relative;

    min-width: 80%;
    width: 80%;
    height: 100%;

    flex: 0 0 80%;

    overflow: hidden;

    border: 1px solid var(--icerik-kart-border);
    border-radius: 19px;

    background: var(--icerik-kart-surface);

    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.icerik-kart-gorsel img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;

    transition: transform 0.35s ease;
}

.icerik-kart-gorsel:hover img {
    transform: scale(1.025);
}

.icerik-kart-gorsel-etiket {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 3;

    max-width: calc(100% - 24px);

    padding: 6px 11px;

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

    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;

    background: rgba(20, 20, 20, 0.68);
    color: #ffffff;

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

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.icerik-kart-gorsel-sayaci {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;

    padding: 6px 10px;

    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;

    background: rgba(20, 20, 20, 0.68);
    color: rgba(255, 255, 255, 0.88);

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

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Görsel yoksa */

.icerik-kart-gorsel-bos {
    width: 100%;
    height: 100%;
    min-height: 250px;

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

    border: 1px solid var(--icerik-kart-border);
    border-radius: 19px;

    background: var(--icerik-kart-surface);
    color: var(--icerik-kart-soft);

    font-size: 12px;
    font-weight: 600;
}

.icerik-kart-gorsel-bos i {
    font-size: 25px;
}

/* Web okları */

.icerik-kart-gorsel-ok {
    position: absolute;
    top: 50%;
    z-index: 8;

    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(255, 255, 255, 0.17);
    border-radius: 50%;

    background: rgba(20, 20, 20, 0.72);
    color: #ffffff;

    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.27);

    font-size: 13px;

    transform: translateY(-50%);

    backdrop-filter: blur(11px);
    -webkit-backdrop-filter: blur(11px);

    transition:
        background-color 0.2s ease,
        transform 0.2s ease,
        opacity 0.2s ease;
}

.icerik-kart-gorsel-ok:hover {
    background: rgba(20, 20, 20, 0.94);

    transform:
        translateY(-50%)
        scale(1.07);
}

.icerik-kart-gorsel-ok.sol {
    left: 10px;
}

.icerik-kart-gorsel-ok.sag {
    right: 10px;
}

.icerik-kart-gorsel-ok:disabled {
    opacity: 0.28;
    pointer-events: none;
}

/* Görsel alt noktaları */

.icerik-kart-gorsel-noktalar {
    position: absolute;
    right: 0;
    bottom: 10px;
    left: 0;
    z-index: 8;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;

    pointer-events: none;
}

.icerik-kart-gorsel-nokta {
    width: 6px;
    height: 6px;

    border-radius: 999px;

    background: rgba(255, 255, 255, 0.48);

    transition:
        width 0.2s ease,
        background-color 0.2s ease;
}

.icerik-kart-gorsel-nokta.active {
    width: 17px;

    background: #ffffff;
}

/* =========================================================
   BİLGİ ALANI
   ========================================================= */

.icerik-kart-bilgi {
    min-width: 0;

    display: flex;
    flex-direction: column;

    padding: 4px 2px;
}

.icerik-kart-mekan {
    display: inline-block;

    max-width: 100%;

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

    color: var(--icerik-kart-text);

    font-size: clamp(15px, 1.35vw, 20px);
    line-height: 1.22;
    font-weight: 700;
    letter-spacing: -0.45px;

    transition: color 0.2s ease;
}

a.icerik-kart-mekan:hover {
    color: var(--icerik-kart-orange);
}

.icerik-kart-adres {
    display: flex;
    align-items: flex-start;
    gap: 7px;

    margin-top: 8px;

    color: var(--icerik-kart-muted);

    font-size: 11.5px;
    line-height: 1.45;
    font-weight: 600;
}

.icerik-kart-adres i {
    flex: 0 0 auto;

    margin-top: 2px;

    color: var(--icerik-kart-orange);
}

.icerik-kart-hesap {
    display: grid;
    gap: 7px;

    margin-top: 17px;
    padding: 13px 14px;

    border: 1px solid var(--icerik-kart-border);
    border-radius: 15px;

    background: var(--icerik-kart-surface);
}

.icerik-kart-hesap-baslik {
    color: var(--icerik-kart-soft);

    font-size: 10px;
    font-weight: 600;
}

.icerik-kart-hesap-tutar {
    color: var(--icerik-kart-text);

    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.4px;
}

.icerik-kart-hesap-detay {
    color: var(--icerik-kart-muted);

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

.icerik-kart-menu-icerigi {
    color: var(--icerik-kart-text);

    font-size: 14px;
    line-height: 1.35;
    font-weight: 600;
}

.icerik-kart-aciklama {
    position: relative;

    min-height: 0;
    max-height: 104px;

    margin-top: 15px;

    overflow: hidden;

    color: var(--icerik-kart-muted);

    font-size: 12px;
    line-height: 1.6;
    font-weight: 500;
}

.icerik-kart-aciklama.is-truncated::after {
    content: "";

    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;

    height: 35px;

    background:
        linear-gradient(
            transparent,
            rgba(24, 24, 24, 0.98)
        );

    pointer-events: none;
}

.icerik-kart-devamini-gor {
    position: relative;
    z-index: 2;

    display: inline-flex;
    align-items: center;
    gap: 6px;

    margin-top: 9px;

    border: none;

    background: transparent;
    color: var(--icerik-kart-text);

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

.icerik-kart-devamini-gor:hover {
    color: var(--icerik-kart-orange);
}

/* =========================================================
   ALT AKSİYON VE PUAN ALANI
   ========================================================= */

.icerik-kart-alt {
    width: 100%;

    margin-top: 17px;
    padding-top: 15px;

    border-top: 1px solid var(--icerik-kart-border);
}

.icerik-kart-puan-butonlari {
    width: 100%;

    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
}

.icerik-kart-puan-button {
    position: relative;

    min-width: 0;
    min-height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;

    padding: 0 7px;

    overflow: hidden;

    border: 1px solid transparent;
    border-radius: 8px;

    color: #ffffff;

    font-size: 9px;
    font-weight: 600;
    white-space: nowrap;

    transition:
        filter 0.2s ease,
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.icerik-kart-puan-button:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.icerik-kart-puan-button.active {
    border-color: #ffffff;

    box-shadow:
        0 0 0 2px rgba(255, 255, 255, 0.14);
}

.icerik-kart-puan-button i {
    font-size: 11px;
}

.icerik-kart-puan-button.cok-uygun {
    background: var(--icerik-cok-uygun);
}

.icerik-kart-puan-button.uygun {
    background: var(--icerik-uygun);
}

.icerik-kart-puan-button.pahali {
    background: var(--icerik-pahali);
}

.icerik-kart-puan-button.cok-pahali {
    background: var(--icerik-cok-pahali);
}

/* Oy ve yorum bilgisi */

.icerik-kart-etkilesim {
    width: 100%;

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

    margin-top: 11px;
}

.icerik-kart-oy-bilgisi {
    min-width: 0;

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

    color: var(--icerik-kart-muted);

    font-size: 10.5px;
    font-weight: 600;
}

.icerik-kart-yorum {
    flex: 0 0 auto;

    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 7px 9px;

    border-radius: 10px;

    color: var(--icerik-kart-muted);

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

    transition:
        color 0.2s ease,
        background-color 0.2s ease;
}

.icerik-kart-yorum:hover {
    background: var(--icerik-kart-surface);
    color: var(--icerik-kart-text);
}

.icerik-kart-yorum i {
    font-size: 14px;
}

/* Puan yüzdesi çubuğu */

.icerik-kart-puan-dagilimi {
    width: 100%;
    height: 27px;

    display: flex;

    margin-top: 8px;

    overflow: hidden;

    border-radius: 8px;

    background: var(--icerik-kart-surface);
}

.icerik-kart-puan-parca {
    min-width: 0;

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

    color: #ffffff;

    font-size: 9px;
    font-weight: 600;
    white-space: nowrap;
}

.icerik-kart-puan-parca.cok-uygun {
    background: var(--icerik-cok-uygun);
}

.icerik-kart-puan-parca.uygun {
    background: var(--icerik-uygun);
}

.icerik-kart-puan-parca.pahali {
    background: var(--icerik-pahali);
}

.icerik-kart-puan-parca.cok-pahali {
    background: var(--icerik-cok-pahali);
}

/* =========================================================
   YÜKLENİYOR / BOŞ DURUM
   ========================================================= */

.icerik-kart-yukleniyor,
.icerik-kart-bos-durum {
    width: 100%;

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

    padding: 42px 20px;

    border: 1px dashed var(--icerik-kart-border);
    border-radius: 22px;

    background: var(--icerik-kart-bg);
    color: var(--icerik-kart-muted);

    text-align: center;

    font-size: 12px;
    line-height: 1.6;
    font-weight: 600;
}

.icerik-kart-spinner {
    width: 27px;
    height: 27px;

    border: 3px solid rgba(255, 255, 255, 0.12);
    border-top-color: var(--icerik-kart-orange);
    border-radius: 50%;

    animation: icerik-kart-spin 0.75s linear infinite;
}

@keyframes icerik-kart-spin {
    to {
        transform: rotate(360deg);
    }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {
    .icerik-kart {
        padding: 15px;
        border-radius: 21px;
    }

    .icerik-kart-orta {
        grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
        gap: 13px;
    }

    .icerik-kart-gorsel-alani,
    .icerik-kart-gorsel-bos {
        height: 350px;
        min-height: 350px;
    }

    .icerik-kart-hesap {
        margin-top: 12px;
    }
}

@media (max-width: 680px) {
    .icerik-kart {
        padding: 13px;

        border-right: none;
        border-left: none;
        border-radius: 0;

        box-shadow: none;
    }

    .icerik-kart-listesi {
        gap: 12px;
    }

    .icerik-kart-header {
        margin-bottom: 10px;
    }

    .icerik-kart-profil {
        width: 28px;
        height: 28px;

        flex-basis: 28px;
    }

    .icerik-kart-username {
        max-width: 155px;

        font-size: 11.5px;
    }

    .icerik-kart-kullanici-alt {
        display: none;
    }

    .icerik-kart-zaman {
        font-size: 9px;
    }

    .icerik-kart-menu-button {
        width: 32px;
        height: 32px;

        font-size: 17px;
    }

    /*
        Mobil görünümde görsel ve bilgi alanı yine yan yana.
        Görsel tarafı %60, bilgi tarafı %40.
    */

    .icerik-kart-orta {
        grid-template-columns: minmax(0, 60fr) minmax(0, 40fr);
        gap: 10px;
    }

    .icerik-kart-gorsel-alani,
    .icerik-kart-gorsel-bos {
        min-height: 126px;
        height: 126px;

        border-radius: 15px;
    }

    .icerik-kart-gorsel {
        border-radius: 15px;
    }

    /*
        Mobilde kullanıcı parmağıyla kaydırır.
        Oklar gizlenir.
    */

    .icerik-kart-gorsel-ok {
        display: none;
    }

    .icerik-kart-gorsel-etiket {
        top: 7px;
        left: 7px;

        padding: 4px 7px;

        font-size: 8px;
    }

    .icerik-kart-gorsel-sayaci {
        top: 7px;
        right: 7px;

        padding: 4px 7px;

        font-size: 8px;
    }

    .icerik-kart-gorsel-noktalar {
        bottom: 6px;
    }

    .icerik-kart-gorsel-nokta {
        width: 4px;
        height: 4px;
    }

    .icerik-kart-gorsel-nokta.active {
        width: 12px;
    }

    .icerik-kart-bilgi {
        padding: 0;
    }

    .icerik-kart-mekan {
        font-size: 11px;
        letter-spacing: -0.2px;
    }

    .icerik-kart-adres {
        gap: 4px;

        margin-top: 4px;

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

    .icerik-kart-hesap {
        gap: 3px;

        margin-top: 6px;
        padding: 7px 8px;

        border-radius: 10px;
    }

    .icerik-kart-hesap-baslik {
        font-size: 8px;
    }

    .icerik-kart-hesap-tutar,
    .icerik-kart-menu-icerigi {
        font-size: 10px;
    }

    .icerik-kart-hesap-detay {
        font-size: 8.5px;
    }

    .icerik-kart-aciklama {
        max-height: 46px;

        margin-top: 6px;

        font-size: 9.5px;
        line-height: 1.35;
    }

    .icerik-kart-devamini-gor {
        margin-top: 4px;

        font-size: 9px;
    }

    .icerik-kart-alt {
        margin-top: 11px;
        padding-top: 10px;
    }

    .icerik-kart-puan-butonlari {
        gap: 5px;
    }

    .icerik-kart-puan-button {
        min-height: 29px;

        padding: 0 4px;

        border-radius: 6px;

        font-size: 8px;
    }

    .icerik-kart-puan-button i {
        font-size: 10px;
    }

    .icerik-kart-etkilesim {
        margin-top: 8px;
    }

    .icerik-kart-oy-bilgisi {
        font-size: 9px;
    }

    .icerik-kart-yorum {
        padding: 5px 6px;

        font-size: 9.5px;
    }

    .icerik-kart-yorum i {
        font-size: 13px;
    }

    .icerik-kart-puan-dagilimi {
        height: 24px;
        margin-top: 6px;

        border-radius: 7px;
    }

    .icerik-kart-puan-parca {
        font-size: 8px;
    }

    .icerik-kart-dropdown {
        position: fixed;
        top: auto;
        right: 12px;
        bottom: 18px;
        left: 12px;

        width: auto;

        transform-origin: bottom center;
    }
}

@media (max-width: 390px) {
    .icerik-kart {
        padding-right: 10px;
        padding-left: 10px;
    }

    .icerik-kart-orta {
        gap: 8px;
    }

    .icerik-kart-gorsel-alani,
    .icerik-kart-gorsel-bos {
        height: 212px;
        min-height: 212px;
    }

    .icerik-kart-puan-button {
        font-size: 7px;
    }
}

.dashboard-feed-wrapper {
    width: min(100%, 980px);
    margin: 0 auto;
}

.dashboard-feed-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 24px;
}

.dashboard-feed-title-group {
    min-width: 0;
}

.dashboard-feed-eyebrow {
    margin-bottom: 7px;

    color: var(--orange);

    font-size: 11px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 1.3px;
    text-transform: uppercase;
}

.dashboard-feed-title {
    margin: 0;

    color: var(--text);

    font-size: clamp(24px, 4vw, 38px);
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -1.2px;
}

.dashboard-feed-description {
    max-width: 650px;

    margin: 9px 0 0;

    color: var(--text-muted);

    font-size: 13px;
    line-height: 1.65;
    font-weight: 500;
}

.dashboard-feed-list {
    display: grid;
    gap: 22px;
}

.dashboard-feed-loader {
    display: none;

    align-items: center;
    justify-content: center;
    gap: 10px;

    padding: 28px 15px;

    color: var(--text-muted);

    font-size: 12px;
    font-weight: 600;
}

.dashboard-feed-loader.active {
    display: flex;
}

.dashboard-feed-spinner {
    width: 23px;
    height: 23px;

    border: 3px solid var(--border);
    border-top-color: var(--orange);
    border-radius: 50%;

    animation: dashboard-spinner 0.75s linear infinite;
}

@keyframes dashboard-spinner {
    to {
        transform: rotate(360deg);
    }
}

.dashboard-feed-message {
    display: none;

    padding: 36px 20px;

    border: 1px dashed var(--border);
    border-radius: 20px;

    background: var(--surface);

    color: var(--text-muted);

    text-align: center;

    font-size: 12px;
    line-height: 1.7;
    font-weight: 600;
}

.dashboard-feed-message.active {
    display: block;
}

.dashboard-feed-message i {
    display: block;
    margin-bottom: 12px;

    color: var(--orange);

    font-size: 28px;
}

/*
    Profil fotoğrafı yüklenemezse gösterilecek alan
*/

.icerik-kart-profil-fallback {
    width: 100%;
    height: 100%;

    display: grid;
    place-items: center;
}

/*
    Açıklama alanını bağlantı hâline getiriyoruz.
*/

.icerik-kart-aciklama-link {
    display: block;

    color: inherit;
    text-decoration: none;
}

.icerik-kart-aciklama-link:hover {
    color: var(--icerik-kart-text);
}

.icerik-kart-aciklama-bos {
    color: var(--icerik-kart-soft);
    font-style: italic;
}
/*
    Aktif puan kontrol işareti
*/

.icerik-kart-puan-check {
    display: none;
}
.icerik-kart-puan-button.active
.icerik-kart-puan-check {
    display: inline-block;
}
.icerik-kart-puan-button:disabled {
    cursor: wait;
    opacity: 0.65;
}
/*
    Görsel track'inde tek görsel varsa tamamını kaplasın.
    Birden fazlaysa daha önce hazırladığımız 80 / 5 / 15 oranı çalışır.
*/
.icerik-kart-gorsel-track.tek-gorsel {
    gap: 0;
}
.icerik-kart-gorsel-track.tek-gorsel
.icerik-kart-gorsel {
    width: 100%;
    min-width: 100%;
    flex-basis: 100%;
}
.icerik-kart-galeri {
    position: relative;
    width: 100%;
    height: 420px;
    overflow: hidden;
    border-radius: 18px;
}
.icerik-kart-galeri img{
    width:100%;
    height:100%;
    object-fit:contain;
    background:#111;
}
/*
    Menü açıldığında kartın üstünde kalması
*/
.icerik-kart.menu-open {
    z-index: 50;
}
/*
    Kullanıcının verdiği puan bilgisi
*/
.icerik-kart-benim-puanim {
    display: none;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    color: var(--icerik-kart-muted);
    font-size: 9.5px;
    font-weight: 600;
}
.icerik-kart-benim-puanim.active {
    display: flex;
}
.icerik-kart-benim-puanim i {
    color: var(--orange);
}
/*
    Görsel görüntüleyici
*/
.icerik-gorsel-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 26px;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.22s ease,
        visibility 0.22s ease;
}
.icerik-gorsel-modal.open {
    opacity: 1;
    visibility: visible;
}
.icerik-gorsel-modal-dialog {
    position: relative;
    width: min(1100px, 100%);
    height: min(82vh, 800px);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 24px;
    background: rgba(15, 15, 15, 0.8);
    box-shadow:
        0 40px 120px rgba(0, 0, 0, 0.6);
    transform: translateY(12px) scale(0.985);
    transition: transform 0.22s ease;
}
.icerik-gorsel-modal.open
.icerik-gorsel-modal-dialog {
    transform: translateY(0) scale(1);
}
.icerik-gorsel-modal-image-wrapper {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.icerik-gorsel-modal-image {
    display: block;

    max-width: 100%;
    max-height: calc(92vh - 64px);

    object-fit: contain;
}

.icerik-gorsel-modal-resim {
    position: relative;
    z-index: 2;

    display: block;

    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;

    object-fit: contain;
    object-position: center;

    user-select: none;
    -webkit-user-drag: none;
}

.icerik-gorsel-modal-icerik {
    position: relative;

    width: min(1100px, calc(100vw - 52px));
    height: min(82vh, 800px);

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

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 24px;

    background: rgba(15, 15, 15, 0.8);

    box-shadow:
        0 40px 120px rgba(0, 0, 0, 0.6);
}

.icerik-gorsel-modal-arka-plan {
    position: absolute;
    inset: 0;
    z-index: 0;

    overflow: hidden;
}

.icerik-gorsel-modal-arka-plan img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;

    filter:
        blur(30px)
        brightness(0.35);

    transform: scale(1.12);
}

.icerik-gorsel-modal-watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: rgba(190, 190, 190, 0.27);
    text-align: center;
    pointer-events: none;
    user-select: none;
    transform:
        translate(-50%, -50%)
        rotate(-12deg);
}
.icerik-gorsel-modal-watermark img {
    width: 62px;
    height: 62px;
    object-fit: contain;
    opacity: 0.48;
}
.icerik-gorsel-modal-watermark span {
    font-size: clamp(28px, 6vw, 58px);
    line-height: 1;
    font-weight: 700;
    letter-spacing: -2px;
    white-space: nowrap;
}
.icerik-gorsel-modal-close,
.icerik-gorsel-modal-arrow {
    position: absolute;
    z-index: 15;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(30, 30, 30, 0.72);
    color: #ffffff;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition:
        background-color 0.2s ease,
        transform 0.2s ease,
        opacity 0.2s ease;
}
.icerik-gorsel-modal-close:hover,
.icerik-gorsel-modal-arrow:hover {
    background: rgba(30, 30, 30, 0.96);
}
.icerik-gorsel-modal-close {
    top: 15px;
    right: 15px;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    font-size: 17px;
}
.icerik-gorsel-modal-arrow {
    top: 50%;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    font-size: 15px;
    transform: translateY(-50%);
}
.icerik-gorsel-modal-arrow:hover {
    transform:
        translateY(-50%)
        scale(1.06);
}
.icerik-gorsel-modal-arrow.sol {
    left: 16px;
}
.icerik-gorsel-modal-arrow.sag {
    right: 16px;
}
.icerik-gorsel-modal-arrow[hidden] {
    display: none;
}
.icerik-gorsel-modal-info {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 15;
    display: flex;
    align-items: center;
    gap: 8px;
}
.icerik-gorsel-modal-tag,
.icerik-gorsel-modal-counter {
    padding: 7px 11px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: rgba(30, 30, 30, 0.72);
    color: #ffffff;
    font-size: 10.5px;
    font-weight: 600;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
/*
    Onay modalı
*/
.dashboard-confirm-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.68);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.2s ease,
        visibility 0.2s ease;
}
.dashboard-confirm-modal.open {
    opacity: 1;
    visibility: visible;
}
.dashboard-confirm-dialog {
    width: min(410px, 100%);
    padding: 22px;
    border: 1px solid var(--border);
    border-radius: 22px;
    background: var(--surface-strong);
    color: var(--text);
    box-shadow: var(--shadow-large);
}
.dashboard-confirm-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    margin: 0 auto 15px;
    border-radius: 16px;
    background: rgba(220, 53, 69, 0.12);
    color: #dc3545;
    font-size: 20px;
}
.dashboard-confirm-title {
    margin: 0;
    text-align: center;
    color: var(--text);
    font-size: 17px;
    font-weight: 600;
}
.dashboard-confirm-text {
    margin: 9px 0 0;
    color: var(--text-muted);
    text-align: center;
    font-size: 12px;
    line-height: 1.6;
    font-weight: 500;
}
.dashboard-confirm-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 19px;
}
.dashboard-confirm-button {
    min-height: 43px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--surface);
    color: var(--text);
    font-size: 11.5px;
    font-weight: 600;
}
.dashboard-confirm-button.danger {
    border-color: rgba(220, 53, 69, 0.2);
    background: #dc3545;
    color: #ffffff;
}
/*
    Küçük bildirim
*/
.dashboard-toast-container {
    position: fixed;
    top: 88px;
    right: 20px;
    z-index: 11000;
    width: min(360px, calc(100% - 40px));
    display: grid;
    gap: 10px;
    pointer-events: none;
}
.dashboard-toast {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 13px 14px;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: var(--surface-strong);
    color: var(--text);
    box-shadow: var(--shadow-large);
    font-size: 11.5px;
    line-height: 1.45;
    font-weight: 600;
    opacity: 0;
    transform: translateY(-9px);
    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}
.dashboard-toast.show {
    opacity: 1;
    transform: translateY(0);
}
.dashboard-toast.success i {
    color: #20b26b;
}
.dashboard-toast.error i {
    color: #dc3545;
}
@media (max-width: 680px) {
    .dashboard-feed-wrapper {
        width: 100%;
    }
    .dashboard-feed-header {
        padding: 0 13px;
    }
    .dashboard-feed-list {
        gap: 11px;
    }
    .icerik-gorsel-modal {
        padding: 0;
    }
    .icerik-gorsel-modal-dialog {
        width: 100%;
        height: 80vh;
        border-right: none;
        border-left: none;
        border-radius: 0;
    }
    .icerik-kart-galeri{
        aspect-ratio:16/10;
    }
    .icerik-kart-galeri img{
        width:100%;
        height:100%;
        object-fit:cover;
    }
    .icerik-gorsel-modal-arrow {
        width: 40px;
        height: 40px;
    }
    .icerik-gorsel-modal-arrow.sol {
        left: 9px;
    }
    .icerik-gorsel-modal-arrow.sag {
        right: 9px;
    }
    .icerik-gorsel-modal-info {
        top: 12px;
        left: 12px;
    }
    .icerik-gorsel-modal-close {
        top: 12px;
        right: 12px;
    }
    .dashboard-toast-container {
        top: 78px;
        right: 12px;
        left: 12px;
        width: auto;
    }
}

@media (max-width: 900px) {
    .icerik-kart-gorsel-alani {
        height: 350px;
    }
}

@media (max-width: 680px) {
    .icerik-kart-gorsel-alani,
    .icerik-kart-gorsel-bos {
        height: 226px;
        min-height: 226px;
    }
}

@media (max-width: 390px) {
    .icerik-kart-gorsel-alani,
    .icerik-kart-gorsel-bos {
        height: 212px;
        min-height: 212px;
    }
}

/* =========================================================
   PROFİL SAYFASI - KOYU TEMA
========================================================= */

.hs-profile {
    position: relative;
    width: 80%;
    margin-bottom: 26px;
    margin-left: 10%;
    margin-right: 10%;
    padding: 24px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 22px;

    background: #050505;
    color: #ffffff;

    box-shadow:
        0 14px 40px rgba(0, 0, 0, 0.24);
}

.hs-profile-top {
    display: flex;
    align-items: flex-start;
    gap: 18px;
}

.hs-profile-image-link {
    flex: 0 0 auto;
    display: block;
    text-decoration: none;
}

.hs-profile-image-wrapper {
    position: relative;
    width: 88px;
    height: 88px;
}

.hs-profile-image,
.hs-profile-image-placeholder {
    width: 82px;
    height: 82px;

    border: 2px solid #ffffff;
    border-radius: 50%;

    background: #ffffff;
}

.hs-profile-image {
    display: block;
    object-fit: cover;
}

.hs-profile-image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;

    color: #050505;
}

.hs-profile-image-placeholder svg {
    width: 42px;
    height: 42px;
}

.hs-profile-image-edit {
    position: absolute;
    right: 0;
    bottom: 2px;

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

    width: 30px;
    height: 30px;

    border: 3px solid #050505;
    border-radius: 50%;

    background: #050505;
    color: #ffffff;

    box-shadow:
        0 5px 14px rgba(0, 0, 0, 0.32);
}

.hs-profile-image-edit svg {
    width: 15px;
    height: 15px;
}

.hs-profile-info {
    min-width: 0;
    flex: 1;
}

.hs-profile-name-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.hs-profile-name-group {
    min-width: 0;
}

.hs-profile-name {
    margin: 0;

    color: #ffffff;

    font-size: 19px;
    line-height: 1.25;
    font-weight: 600;

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

.hs-profile-username {
    margin-top: 4px;

    color: rgba(255, 255, 255, 0.58);

    font-size: 12px;
    line-height: 1.4;
    font-weight: 600;
}

.hs-profile-stats {
    display: flex;
    align-items: flex-start;
    gap: 22px;

    margin-top: 20px;

    overflow-x: auto;
    scrollbar-width: none;
}

.hs-profile-stats::-webkit-scrollbar {
    display: none;
}

.hs-profile-stat {
    flex: 0 0 auto;
    min-width: 54px;

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

    color: #ffffff;
    text-align: center;
    text-decoration: none;
}

.hs-profile-stat-link {
    cursor: pointer;
}

.hs-profile-stat-link:hover .hs-profile-stat-value {
    color: #ffffff;
}

.hs-profile-stat-link:hover .hs-profile-stat-label {
    color: rgba(255, 255, 255, 0.95);
}

.hs-profile-stat-value {
    color: #ffffff;

    font-size: 15px;
    line-height: 1.2;
    font-weight: 600;
}

.hs-profile-stat-label {
    margin-top: 4px;

    color: rgba(255, 255, 255, 0.66);

    font-size: 9px;
    line-height: 1.2;
    font-weight: 600;
}

.hs-profile-bio {
    width: 100%;

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

    margin-top: 18px;
    padding: 13px 15px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 15px;

    background: rgba(255, 255, 255, 0.055);
    color: #ffffff;

    text-align: left;
    cursor: pointer;

    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        transform 0.18s ease;
}

.hs-profile-bio:hover {
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.085);
}

.hs-profile-bio:active {
    transform: scale(0.995);
}

.hs-profile-bio-text {
    min-width: 0;
    flex: 1;

    color: rgba(255, 255, 255, 0.87);

    font-size: 13px;
    line-height: 1.55;
    font-weight: 600;

    overflow-wrap: anywhere;
}

.hs-profile-bio-action {
    flex: 0 0 auto;

    display: inline-flex;
    align-items: center;
    gap: 5px;

    color: rgba(255, 255, 255, 0.68);

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

.hs-profile-bio-action svg {
    width: 16px;
    height: 16px;
}

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

    margin-top: 14px;
}

.hs-profile-action-button {
    min-height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    padding: 9px 14px;

    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 13px;

    background: transparent;
    color: #ffffff;

    font-size: 13px;
    line-height: 1.2;
    font-weight: 600;

    text-decoration: none;
    cursor: pointer;

    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        transform 0.18s ease;
}

.hs-profile-action-button:hover {
    border-color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}

.hs-profile-action-button:active {
    transform: scale(0.985);
}

.hs-profile-action-button svg {
    width: 18px;
    height: 18px;
}

.hs-profile-settings {
    position: relative;
}

.hs-profile-settings > .hs-profile-action-button {
    width: 100%;
}

.hs-profile-settings-menu {
    position: absolute;
    z-index: 60;
    top: calc(100% + 9px);
    right: 0;

    width: min(300px, calc(100vw - 40px));
    max-height: min(520px, calc(100vh - 160px));

    padding: 8px;

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 17px;

    background: #050505;

    box-shadow:
        0 22px 60px rgba(0, 0, 0, 0.5);

    overflow-y: auto;
}

.hs-profile-settings-menu[hidden] {
    display: none;
}

.hs-profile-settings-item {
    display: flex;
    align-items: center;
    gap: 12px;

    min-height: 48px;
    padding: 10px 12px;

    border-radius: 12px;

    color: #ffffff;
    background: #050505;

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

    text-decoration: none;

    transition:
        background-color 0.16s ease,
        color 0.16s ease;
}

.hs-profile-settings-item:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.hs-profile-settings-item svg {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;

    color: rgba(255, 255, 255, 0.72);
}

.hs-profile-settings-item-danger {
    color: #ff6b6b;
}

.hs-profile-settings-item-danger svg {
    color: #ff6b6b;
}

.hs-profile-settings-item-danger:hover {
    background: rgba(255, 82, 82, 0.12);
    color: #ff8080;
}

.hs-profile-settings-separator {
    height: 1px;
    margin: 7px 5px;

    background: rgba(255, 255, 255, 0.08);
}

.hs-profile-content-divider {
    height: 1px;
    margin: 0 0 24px;

    background: rgba(255, 255, 255, 0.08);
}

/* =========================================================
   BIO MODALI - KOYU TEMA
========================================================= */

body.hs-modal-open {
    overflow: hidden;
}

.hs-profile-bio-modal {
    position: fixed;
    z-index: 1000;
    inset: 0;

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

    padding: 20px;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.18s ease,
        visibility 0.18s ease;
}

.hs-profile-bio-modal[hidden] {
    display: none;
}

.hs-profile-bio-modal.is-open {
    opacity: 1;
    visibility: visible;
}

.hs-profile-bio-modal-backdrop {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    border: 0;

    background: #050505;
    backdrop-filter: blur(6px);

    cursor: pointer;
}

.hs-profile-bio-modal-dialog {
    position: relative;
    z-index: 1;

    width: min(100%, 520px);

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 22px;

    background: #050505;
    color: #ffffff;

    box-shadow:
        0 28px 80px rgba(0, 0, 0, 0.58);

    transform: translateY(14px) scale(0.985);

    transition:
        transform 0.18s ease;
}

.hs-profile-bio-modal.is-open
.hs-profile-bio-modal-dialog {
    transform: translateY(0) scale(1);
}

.hs-profile-bio-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;

    padding: 18px 20px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.hs-profile-bio-modal-title {
    margin: 0;

    color: #ffffff;

    font-size: 17px;
    line-height: 1.3;
    font-weight: 600;
}

.hs-profile-bio-modal-close {
    flex: 0 0 auto;

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

    width: 34px;
    height: 34px;
    padding: 0;

    border: 0;
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;

    cursor: pointer;
}

.hs-profile-bio-modal-close:hover {
    background: rgba(255, 255, 255, 0.14);
}

.hs-profile-bio-modal-close svg {
    width: 19px;
    height: 19px;
}

.hs-profile-bio-modal-body {
    padding: 20px;
}

.hs-profile-bio-input {
    width: 100%;
    min-height: 105px;

    padding: 14px 15px;

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    outline: none;

    background: rgba(255, 255, 255, 0.07);
    color: #ffffff;

    font-family: inherit;
    font-size: 13px;
    line-height: 1.55;
    font-weight: 600;

    resize: vertical;

    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background-color 0.18s ease;
}

.hs-profile-bio-input::placeholder {
    color: rgba(255, 255, 255, 0.42);
}

.hs-profile-bio-input:focus {
    border-color: rgba(255, 255, 255, 0.34);
    background: rgba(255, 255, 255, 0.09);

    box-shadow:
        0 0 0 3px rgba(255, 255, 255, 0.055);
}

.hs-profile-bio-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    min-height: 22px;
    margin-top: 8px;
}

.hs-profile-bio-message {
    font-size: 11px;
    line-height: 1.35;
    font-weight: 600;
}

.hs-profile-bio-message.is-success {
    color: #68d391;
}

.hs-profile-bio-message.is-error {
    color: #ff7373;
}

.hs-profile-bio-counter {
    margin-left: auto;

    color: rgba(255, 255, 255, 0.52);

    font-size: 10px;
    font-weight: 600;
}

.hs-profile-bio-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 9px;

    padding: 16px 20px 20px;
}

.hs-profile-bio-cancel,
.hs-profile-bio-save {
    min-width: 100px;
    min-height: 42px;

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

    padding: 10px 16px;

    border-radius: 13px;

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

    cursor: pointer;
}

.hs-profile-bio-cancel {
    border: 1px solid rgba(255, 255, 255, 0.18);

    background: transparent;
    color: #ffffff;
}

.hs-profile-bio-cancel:hover {
    background: rgba(255, 255, 255, 0.07);
}

.hs-profile-bio-save {
    border: 1px solid #050505;

    background: #050505;
    color: #ffffff;
}

.hs-profile-bio-save:hover {
    background: #747474;
}

.hs-profile-bio-save:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.hs-profile-bio-spinner {
    width: 19px;
    height: 19px;

    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #ffffff;
    border-radius: 50%;

    animation: hs-profile-spin 0.7s linear infinite;
}

@keyframes hs-profile-spin {
    to {
        transform: rotate(360deg);
    }
}

/* =========================================================
   RESPONSIVE - KOYU TEMA
========================================================= */

@media (max-width: 640px) {
    .hs-profile {
        padding: 18px;
        border-radius: 18px;
    }

    .hs-profile-top {
        gap: 13px;
    }

    .hs-profile-image-wrapper {
        width: 78px;
        height: 78px;
    }

    .hs-profile-image,
    .hs-profile-image-placeholder {
        width: 72px;
        height: 72px;
    }

    .hs-profile-image-edit {
        width: 28px;
        height: 28px;
    }

    .hs-profile-name {
        font-size: 16px;
    }

    .hs-profile-stats {
        gap: 12px;
        margin-top: 15px;
    }

    .hs-profile-stat {
        min-width: 47px;
    }

    .hs-profile-stat-value {
        font-size: 13px;
    }

    .hs-profile-stat-label {
        font-size: 8px;
    }

    .hs-profile-bio {
        margin-top: 15px;
    }

    .hs-profile-settings-menu {
        position: fixed;
        top: auto;
        right: 16px;
        bottom: 20px;
        left: 16px;

        width: auto;
        max-height: calc(100vh - 40px);
    }

    .hs-profile-bio-modal {
        align-items: flex-end;
        padding: 12px;
    }

    .hs-profile-bio-modal-dialog {
        width: 100%;

        border-radius: 22px 22px 16px 16px;
    }

    .hs-profile-bio-modal-footer {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hs-profile-bio-cancel,
    .hs-profile-bio-save {
        width: 100%;
    }
}

@media (max-width: 420px) {
    .hs-profile {
        padding: 15px;
    }

    .hs-profile-top {
        gap: 10px;
    }

    .hs-profile-image-wrapper {
        width: 70px;
        height: 70px;
    }

    .hs-profile-image,
    .hs-profile-image-placeholder {
        width: 66px;
        height: 66px;
    }

    .hs-profile-name {
        font-size: 15px;
    }

    .hs-profile-username {
        font-size: 11px;
    }

    .hs-profile-stats {
        gap: 8px;
    }

    .hs-profile-stat {
        min-width: 42px;
    }

    .hs-profile-actions {
        gap: 8px;
    }

    .hs-profile-action-button {
        padding-right: 8px;
        padding-left: 8px;

        font-size: 12px;
    }
}

/* =========================================================
   ŞİFREMİ DEĞİŞTİR SAYFASI - KOYU TEMA
========================================================= */

.hs-password-page {
    width: 100%;
    max-width: 720px;
    margin: 0 auto 40px;
}

.hs-password-form {
    width: 100%;
    padding: 28px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;

    background: #050505;

    box-shadow:
        0 14px 40px rgba(0, 0, 0, 0.28);
}

.hs-password-form-header {
    display: flex;
    align-items: center;
    gap: 16px;

    margin-bottom: 26px;
    padding-bottom: 22px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.hs-password-form-icon {
    flex: 0 0 auto;

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

    width: 54px;
    height: 54px;

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;

    background: rgba(255, 255, 255, 0.07);
    color: #ffffff;
}

.hs-password-form-icon svg {
    width: 26px;
    height: 26px;
}

.hs-password-form-title {
    margin: 0 0 5px;

    color: #ffffff;

    font-size: 19px;
    line-height: 1.3;
    font-weight: 600;
}

.hs-password-form-description {
    margin: 0;

    color: rgba(255, 255, 255, 0.6);

    font-size: 13px;
    line-height: 1.5;
    font-weight: 500;
}

.hs-password-fields {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.hs-password-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hs-password-label {
    color: rgba(255, 255, 255, 0.9);

    font-size: 13px;
    line-height: 1.3;
    font-weight: 600;
}

.hs-password-input-wrapper {
    position: relative;
    width: 100%;
}

.hs-password-input {
    width: 100%;
    height: 48px;

    padding: 0 50px 0 15px;

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 13px;
    outline: none;

    background: rgba(255, 255, 255, 0.055);
    color: #ffffff;

    font-family: inherit;
    font-size: 14px;
    line-height: 1;
    font-weight: 600;

    transition:
        border-color 0.18s ease,
        background-color 0.18s ease,
        box-shadow 0.18s ease;
}

.hs-password-input::placeholder {
    color: rgba(255, 255, 255, 0.34);
    font-weight: 500;
}

.hs-password-input:hover {
    border-color: rgba(255, 255, 255, 0.18);
}

.hs-password-input:focus {
    border-color: rgba(255, 255, 255, 0.42);
    background: rgba(255, 255, 255, 0.08);

    box-shadow:
        0 0 0 3px rgba(255, 255, 255, 0.055);
}

.hs-password-toggle {
    position: absolute;
    top: 50%;
    right: 8px;

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

    width: 36px;
    height: 36px;
    padding: 0;

    border: 0;
    border-radius: 10px;

    background: transparent;
    color: rgba(255, 255, 255, 0.52);

    cursor: pointer;

    transform: translateY(-50%);

    transition:
        background-color 0.16s ease,
        color 0.16s ease;
}

.hs-password-toggle:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.hs-password-toggle.is-visible {
    background: rgba(255, 255, 255, 0.11);
    color: #ffffff;
}

.hs-password-toggle svg {
    width: 20px;
    height: 20px;
}

.hs-password-help {
    color: rgba(255, 255, 255, 0.46);

    font-size: 11px;
    line-height: 1.4;
    font-weight: 500;
}

.hs-password-match-message {
    font-size: 11px;
    line-height: 1.4;
    font-weight: 600;
}

.hs-password-match-message[hidden] {
    display: none;
}

.hs-password-match-message.is-success {
    color: #63d68b;
}

.hs-password-match-message.is-error {
    color: #ff7171;
}

.hs-password-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;

    margin-top: 28px;
    padding-top: 22px;

    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.hs-password-cancel,
.hs-password-submit {
    min-width: 145px;
    min-height: 44px;

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

    padding: 10px 18px;

    border-radius: 12px;

    font-family: inherit;
    font-size: 13px;
    line-height: 1.2;
    font-weight: 600;

    text-decoration: none;
    cursor: pointer;

    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease;
}

.hs-password-cancel {
    border: 1px solid rgba(255, 255, 255, 0.18);

    background: transparent;
    color: rgba(255, 255, 255, 0.82);
}

.hs-password-cancel:hover {
    border-color: rgba(255, 255, 255, 0.34);
    background: rgba(255, 255, 255, 0.07);
    color: #ffffff;
}

.hs-password-submit {
    border: 1px solid #ffffff;

    background: #ffffff;
    color: #050505;
}

.hs-password-submit:hover {
    border-color: #e9e9e9;
    background: #e9e9e9;
    color: #1f1f1f;
}

.hs-password-cancel:active,
.hs-password-submit:active {
    transform: scale(0.98);
}

.hs-password-submit:disabled {
    cursor: not-allowed;
    opacity: 0.55;
    transform: none;
}

/* =========================================================
   ŞİFRE SAYFASI RESPONSIVE - KOYU TEMA
========================================================= */

@media (max-width: 768px) {
    .hs-password-page {
        max-width: 100%;
    }

    .hs-password-form {
        padding: 22px;
        border-radius: 18px;
    }

    .hs-password-form-header {
        margin-bottom: 22px;
        padding-bottom: 18px;
    }
}

@media (max-width: 520px) {
    .hs-password-form {
        padding: 18px;
        border-radius: 16px;
    }

    .hs-password-form-header {
        align-items: flex-start;
        gap: 12px;
    }

    .hs-password-form-icon {
        width: 46px;
        height: 46px;
        border-radius: 13px;
    }

    .hs-password-form-icon svg {
        width: 23px;
        height: 23px;
    }

    .hs-password-form-title {
        font-size: 17px;
    }

    .hs-password-form-description {
        font-size: 12px;
    }

    .hs-password-fields {
        gap: 17px;
    }

    .hs-password-input {
        height: 46px;
        font-size: 13px;
    }

    .hs-password-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;

        margin-top: 24px;
        padding-top: 18px;
    }

    .hs-password-cancel,
    .hs-password-submit {
        width: 100%;
        min-width: 0;
        min-height: 43px;

        padding: 9px 10px;

        font-size: 12px;
    }
}

@media (max-width: 380px) {
    .hs-password-form {
        padding: 15px;
    }

    .hs-password-actions {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   BİLDİRİM AYARLARI - KOYU TEMA
========================================================= */

.hs-notification-page,
.hs-notification-page *,
.hs-notification-page *::before,
.hs-notification-page *::after {
    box-sizing: border-box;
}

.hs-notification-page {
    width: 100%;
    max-width: 760px;
    margin: 0 auto 50px;
}

/*
Koyu temada dashboard alanının arka planının da
tam siyaha yakın olmasını sağlar.
*/
body,
.dashboard-main,
.dashboard-content,
.main-content {
    background-color: #050505;
}

.hs-notification-card {
    width: 100%;
    padding: 26px;

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 22px;

    background: #050505;
    color: #ffffff;

    box-shadow:
        0 18px 55px rgba(0, 0, 0, 0.7);
}

.hs-notification-card-header {
    display: flex;
    align-items: center;
    gap: 15px;

    margin-bottom: 22px;
    padding-bottom: 20px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.hs-notification-card-icon {
    flex: 0 0 auto;

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

    width: 54px;
    height: 54px;

    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 16px;

    background: rgba(255, 255, 255, 0.07);
    color: #ffffff;
}

.hs-notification-card-icon svg {
    width: 26px;
    height: 26px;
}

.hs-notification-card-heading {
    min-width: 0;
}

.hs-notification-card-title {
    margin: 0 0 5px;

    color: #ffffff;

    font-size: 19px;
    line-height: 1.3;
    font-weight: 600;
}

.hs-notification-card-description {
    margin: 0;

    color: rgba(255, 255, 255, 0.56);

    font-size: 12.5px;
    line-height: 1.5;
    font-weight: 500;
}

.hs-notification-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hs-notification-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    min-height: 78px;
    padding: 14px 16px;

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;

    background: rgba(255, 255, 255, 0.045);

    cursor: pointer;

    transition:
        border-color 0.18s ease,
        background-color 0.18s ease,
        transform 0.18s ease,
        box-shadow 0.18s ease;
}

.hs-notification-item:hover {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.075);

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.4);
}

.hs-notification-item:active {
    transform: scale(0.995);
}

.hs-notification-item-content {
    min-width: 0;
    flex: 1;

    display: flex;
    align-items: center;
    gap: 13px;
}

.hs-notification-item-icon {
    flex: 0 0 auto;

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

    width: 40px;
    height: 40px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;

    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.hs-notification-item-icon svg {
    width: 20px;
    height: 20px;
}

.hs-notification-item-text {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hs-notification-item-text strong {
    color: rgba(255, 255, 255, 0.95);

    font-size: 13px;
    line-height: 1.35;
    font-weight: 600;
}

.hs-notification-item-text small {
    color: rgba(255, 255, 255, 0.54);

    font-size: 11.5px;
    line-height: 1.45;
    font-weight: 500;
}

/* =========================================================
   SWITCH - KOYU TEMA
========================================================= */

.hs-switch {
    position: relative;
    flex: 0 0 auto;

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

    width: 50px;
    height: 28px;
}

.hs-switch-input {
    position: absolute;

    width: 1px;
    height: 1px;

    margin: -1px;
    padding: 0;

    opacity: 0;
    overflow: hidden;
    pointer-events: none;
}

.hs-switch-track {
    position: relative;

    display: block;

    width: 50px;
    height: 28px;

    border: 1px solid rgba(255, 255, 255, 0.17);
    border-radius: 999px;

    background: #272727;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.hs-switch-thumb {
    position: absolute;
    top: 3px;
    left: 3px;

    display: block;

    width: 20px;
    height: 20px;

    border-radius: 50%;

    background: #8a8a8a;

    box-shadow:
        0 2px 7px rgba(0, 0, 0, 0.58);

    transition:
        transform 0.2s ease,
        background-color 0.2s ease;
}

.hs-switch-input:checked + .hs-switch-track {
    border-color: rgba(255, 255, 255, 0.92);
    background: #ffffff;
}

.hs-switch-input:checked +
.hs-switch-track
.hs-switch-thumb {
    background: #050505;
    transform: translateX(22px);
}

.hs-switch-input:focus-visible + .hs-switch-track {
    box-shadow:
        0 0 0 4px rgba(255, 255, 255, 0.14);
}

.hs-switch-input:disabled + .hs-switch-track {
    cursor: not-allowed;
    opacity: 0.52;
}

/* =========================================================
   MESAJ VE BUTONLAR - KOYU TEMA
========================================================= */

.hs-notification-message {
    margin-top: 16px;
    padding: 12px 14px;

    border: 1px solid transparent;
    border-radius: 13px;

    font-size: 12px;
    line-height: 1.45;
    font-weight: 600;
}

.hs-notification-message[hidden] {
    display: none;
}

.hs-notification-message.is-success {
    border-color: rgba(64, 190, 111, 0.34);
    background: rgba(40, 166, 86, 0.13);
    color: #69dc91;
}

.hs-notification-message.is-error {
    border-color: rgba(255, 91, 91, 0.35);
    background: rgba(255, 70, 70, 0.11);
    color: #ff7878;
}

.hs-notification-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;

    margin-top: 24px;
    padding-top: 20px;

    border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.hs-notification-cancel,
.hs-notification-save {
    min-width: 150px;
    min-height: 44px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    padding: 10px 18px;

    border-radius: 12px;

    font-family: inherit;
    font-size: 13px;
    line-height: 1.2;
    font-weight: 600;

    text-decoration: none;
    cursor: pointer;

    transition:
        border-color 0.18s ease,
        background-color 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease;
}

.hs-notification-cancel {
    border: 1px solid rgba(255, 255, 255, 0.18);

    background: transparent;
    color: rgba(255, 255, 255, 0.82);
}

.hs-notification-cancel:hover {
    border-color: rgba(255, 255, 255, 0.38);
    background: rgba(255, 255, 255, 0.07);
    color: #ffffff;
}

.hs-notification-save {
    border: 1px solid #ffffff;

    background: #ffffff;
    color: #050505;
}

.hs-notification-save:hover {
    border-color: #dddddd;
    background: #dddddd;
    color: #050505;
}

.hs-notification-save:active,
.hs-notification-cancel:active {
    transform: scale(0.98);
}

.hs-notification-save:disabled {
    cursor: not-allowed;
    opacity: 0.54;
    transform: none;
}

.hs-notification-spinner {
    width: 18px;
    height: 18px;

    border: 2px solid rgba(5, 5, 5, 0.3);
    border-top-color: #050505;
    border-radius: 50%;

    animation:
        hs-notification-spin 0.7s linear infinite;
}

.hs-notification-spinner[hidden] {
    display: none;
}

@keyframes hs-notification-spin {
    to {
        transform: rotate(360deg);
    }
}

/* =========================================================
   RESPONSIVE - KOYU TEMA
========================================================= */

@media (max-width: 640px) {
    .hs-notification-card {
        padding: 19px;
        border-radius: 18px;
    }

    .hs-notification-card-header {
        align-items: flex-start;
        gap: 12px;
    }

    .hs-notification-card-icon {
        width: 46px;
        height: 46px;
        border-radius: 13px;
    }

    .hs-notification-card-title {
        font-size: 17px;
    }

    .hs-notification-item {
        min-height: 72px;
        padding: 12px;
        gap: 12px;
    }

    .hs-notification-item-icon {
        width: 36px;
        height: 36px;
    }

    .hs-notification-item-text strong {
        font-size: 12.5px;
    }

    .hs-notification-item-text small {
        font-size: 10.5px;
    }

    .hs-notification-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hs-notification-cancel,
    .hs-notification-save {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 420px) {
    .hs-notification-card {
        padding: 15px;
    }

    .hs-notification-item {
        align-items: center;
    }

    .hs-notification-item-icon {
        display: none;
    }

    .hs-notification-item-text small {
        max-width: 210px;
    }

    .hs-switch,
    .hs-switch-track {
        width: 46px;
    }

    .hs-switch-track {
        height: 26px;
    }

    .hs-switch-thumb {
        width: 18px;
        height: 18px;
    }

    .hs-switch-input:checked +
    .hs-switch-track
    .hs-switch-thumb {
        transform: translateX(20px);
    }

    .hs-notification-actions {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   HESAP AYARLARI - KOYU TEMA
========================================================= */

.hs-account-page,
.hs-account-page *,
.hs-account-page *::before,
.hs-account-page *::after {
    box-sizing: border-box;
}

.hs-account-page {
    width: 100%;
    max-width: 820px;
    margin: 0 auto 50px;
}

.hs-account-card {
    width: 100%;
    padding: 28px;

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 22px;

    background: #050505;
    color: #ffffff;

    box-shadow:
        0 18px 55px rgba(0, 0, 0, 0.72);
}

.hs-account-card-header {
    display: flex;
    align-items: center;
    gap: 15px;

    margin-bottom: 25px;
    padding-bottom: 21px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.hs-account-card-icon {
    flex: 0 0 auto;

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

    width: 54px;
    height: 54px;

    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 16px;

    background: rgba(255, 255, 255, 0.07);
    color: #ffffff;
}

.hs-account-card-icon svg {
    width: 26px;
    height: 26px;
}

.hs-account-card-heading {
    min-width: 0;
}

.hs-account-card-title {
    margin: 0 0 5px;

    color: #ffffff;

    font-size: 19px;
    line-height: 1.3;
    font-weight: 600;
}

.hs-account-card-description {
    margin: 0;

    color: rgba(255, 255, 255, 0.56);

    font-size: 12.5px;
    line-height: 1.5;
    font-weight: 500;
}

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

.hs-account-field {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hs-account-field-full {
    grid-column: 1 / -1;
}

.hs-account-label {
    padding-left: 2px;

    color: rgba(255, 255, 255, 0.86);

    font-size: 12px;
    line-height: 1.3;
    font-weight: 600;
}

.hs-account-optional {
    margin-left: 4px;

    color: rgba(255, 255, 255, 0.38);

    font-size: 10px;
    font-weight: 600;
}

.hs-account-input,
.hs-account-select {
    width: 100%;
    height: 49px;

    padding: 0 15px;

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 13px;
    outline: none;

    background: rgba(255, 255, 255, 0.05);
    color: #ffffff;

    font-family: inherit;
    font-size: 13px;
    font-weight: 600;

    transition:
        border-color 0.18s ease,
        background-color 0.18s ease,
        box-shadow 0.18s ease;
}

.hs-account-input::placeholder {
    color: rgba(255, 255, 255, 0.34);
    font-weight: 500;
}

.hs-account-input:hover,
.hs-account-select:hover {
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.065);
}

.hs-account-input:focus,
.hs-account-select:focus {
    border-color: rgba(255, 255, 255, 0.48);
    background: rgba(255, 255, 255, 0.075);

    box-shadow:
        0 0 0 4px rgba(255, 255, 255, 0.06);
}

.hs-account-select {
    appearance: none;

    padding-right: 42px;

    background-image:
        linear-gradient(
            45deg,
            transparent 50%,
            rgba(255, 255, 255, 0.68) 50%
        ),
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.68) 50%,
            transparent 50%
        );

    background-position:
        calc(100% - 19px) 21px,
        calc(100% - 14px) 21px;

    background-size:
        5px 5px,
        5px 5px;

    background-repeat: no-repeat;
}

.hs-account-select option {
    background: #111111;
    color: #ffffff;
}

.hs-account-select:disabled {
    cursor: not-allowed;
    opacity: 0.52;
}

.hs-account-phone-group {
    display: grid;
    grid-template-columns: 105px 1fr;
    gap: 10px;
}

.hs-account-field-message {
    min-height: 15px;
    padding-left: 2px;

    color: rgba(255, 255, 255, 0.4);

    font-size: 10.5px;
    line-height: 1.4;
    font-weight: 600;
}

.hs-account-field-message.is-success {
    color: #69dc91;
}

.hs-account-field-message.is-error {
    color: #ff7878;
}

.hs-account-field-message.is-loading {
    color: #f5bd58;
}

.hs-account-input.is-success,
.hs-account-select.is-success {
    border-color: rgba(105, 220, 145, 0.66);
}

.hs-account-input.is-error,
.hs-account-select.is-error {
    border-color: rgba(255, 120, 120, 0.72);
}

.hs-account-input.is-loading,
.hs-account-select.is-loading {
    border-color: rgba(245, 189, 88, 0.67);
}

/* PROFİL GÖRÜNÜRLÜĞÜ */

.hs-account-permission {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    margin-top: 23px;
    padding: 15px 16px;

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;

    background: rgba(255, 255, 255, 0.045);
}

.hs-account-permission-content {
    min-width: 0;
    flex: 1;

    display: flex;
    align-items: center;
    gap: 13px;
}

.hs-account-permission-icon {
    flex: 0 0 auto;

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

    width: 40px;
    height: 40px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;

    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.hs-account-permission-icon svg {
    width: 20px;
    height: 20px;
}

.hs-account-permission-text {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hs-account-permission-text strong {
    color: rgba(255, 255, 255, 0.95);

    font-size: 12.5px;
    line-height: 1.35;
    font-weight: 600;
}

.hs-account-permission-text small {
    color: rgba(255, 255, 255, 0.53);

    font-size: 10.8px;
    line-height: 1.45;
    font-weight: 500;
}

/* SWITCH */

.hs-account-switch {
    position: relative;
    flex: 0 0 auto;

    display: inline-flex;

    width: 50px;
    height: 28px;

    cursor: pointer;
}

.hs-account-switch-input {
    position: absolute;

    width: 1px;
    height: 1px;

    margin: -1px;

    opacity: 0;
    pointer-events: none;
}

.hs-account-switch-track {
    position: relative;

    display: block;

    width: 50px;
    height: 28px;

    border: 1px solid rgba(255, 255, 255, 0.17);
    border-radius: 999px;

    background: #272727;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.hs-account-switch-thumb {
    position: absolute;
    top: 3px;
    left: 3px;

    display: block;

    width: 20px;
    height: 20px;

    border-radius: 50%;

    background: #8a8a8a;

    box-shadow:
        0 2px 7px rgba(0, 0, 0, 0.58);

    transition:
        transform 0.2s ease,
        background-color 0.2s ease;
}

.hs-account-switch-input:checked +
.hs-account-switch-track {
    border-color: #ffffff;
    background: #ffffff;
}

.hs-account-switch-input:checked +
.hs-account-switch-track
.hs-account-switch-thumb {
    background: #050505;
    transform: translateX(22px);
}

.hs-account-switch-input:focus-visible +
.hs-account-switch-track {
    box-shadow:
        0 0 0 4px rgba(255, 255, 255, 0.14);
}

/* SONUÇ MESAJI */

.hs-account-result {
    margin-top: 17px;
    padding: 12px 14px;

    border: 1px solid transparent;
    border-radius: 13px;

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

.hs-account-result[hidden] {
    display: none;
}

.hs-account-result.is-success {
    border-color: rgba(64, 190, 111, 0.34);
    background: rgba(40, 166, 86, 0.13);
    color: #69dc91;
}

.hs-account-result.is-error {
    border-color: rgba(255, 91, 91, 0.35);
    background: rgba(255, 70, 70, 0.11);
    color: #ff7878;
}

/* BUTONLAR */

.hs-account-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;

    margin-top: 24px;
    padding-top: 21px;

    border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.hs-account-cancel,
.hs-account-save {
    min-width: 155px;
    min-height: 44px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    padding: 10px 18px;

    border-radius: 12px;

    font-family: inherit;
    font-size: 12.5px;
    line-height: 1.2;
    font-weight: 600;

    text-decoration: none;
    cursor: pointer;

    transition:
        border-color 0.18s ease,
        background-color 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease;
}

.hs-account-cancel {
    border: 1px solid rgba(255, 255, 255, 0.18);

    background: transparent;
    color: rgba(255, 255, 255, 0.82);
}

.hs-account-cancel:hover {
    border-color: rgba(255, 255, 255, 0.38);
    background: rgba(255, 255, 255, 0.07);
    color: #ffffff;
}

.hs-account-save {
    border: 1px solid #ffffff;

    background: #ffffff;
    color: #050505;
}

.hs-account-save:hover {
    border-color: #dddddd;
    background: #dddddd;
    color: #050505;
}

.hs-account-cancel:active,
.hs-account-save:active {
    transform: scale(0.98);
}

.hs-account-save:disabled {
    cursor: not-allowed;
    opacity: 0.54;
    transform: none;
}

.hs-account-spinner {
    width: 18px;
    height: 18px;

    border: 2px solid rgba(5, 5, 5, 0.3);
    border-top-color: #050505;
    border-radius: 50%;

    animation:
        hs-account-spin 0.7s linear infinite;
}

.hs-account-spinner[hidden] {
    display: none;
}

@keyframes hs-account-spin {
    to {
        transform: rotate(360deg);
    }
}

/* RESPONSIVE */

@media (max-width: 700px) {
    .hs-account-card {
        padding: 20px;
        border-radius: 18px;
    }

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

    .hs-account-field-full {
        grid-column: auto;
    }
}

@media (max-width: 480px) {
    .hs-account-card {
        padding: 16px;
    }

    .hs-account-card-header {
        align-items: flex-start;
        gap: 12px;
    }

    .hs-account-card-icon {
        width: 46px;
        height: 46px;
        border-radius: 13px;
    }

    .hs-account-card-title {
        font-size: 17px;
    }

    .hs-account-phone-group {
        grid-template-columns: 88px 1fr;
    }

    .hs-account-permission-icon {
        display: none;
    }

    .hs-account-actions {
        display: grid;
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .hs-account-cancel,
    .hs-account-save {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 360px) {
    .hs-account-actions {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   ORTAK SÖZLEŞME / YASAL METİN SAYFALARI - KOYU TEMA
========================================================= */

.hs-document-page,
.hs-document-page *,
.hs-document-page *::before,
.hs-document-page *::after {
    box-sizing: border-box;
}

.hs-document-page {
    width: 100%;
    max-width: 920px;

    margin: 0 auto 56px;
}

.hs-document-card {
    width: 100%;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;

    background: #050505;
    color: #ffffff;

    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.72);
}

/* =========================================================
   ÜST BAŞLIK
========================================================= */

.hs-document-header {
    display: flex;
    align-items: center;
    gap: 17px;

    padding: 25px 28px;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.09);

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.055) 0%,
            rgba(255, 255, 255, 0.018) 100%
        );
}

.hs-document-icon {
    width: 56px;
    height: 56px;

    flex: 0 0 56px;

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

    border:
        1px solid rgba(255, 255, 255, 0.13);
    border-radius: 17px;

    background:
        rgba(255, 255, 255, 0.07);
    color: #ffffff;
}

.hs-document-icon svg {
    width: 27px;
    height: 27px;
}

.hs-document-heading {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 7px;
}

.hs-document-title {
    margin: 0;

    color: #ffffff;

    font-size: 21px;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: -0.45px;
}

.hs-document-meta {
    display: flex;
    align-items: center;
    gap: 8px;

    flex-wrap: wrap;
}

.hs-document-meta span {
    display: inline-flex;
    align-items: center;

    min-height: 27px;

    padding: 5px 10px;

    border:
        1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;

    background:
        rgba(255, 255, 255, 0.055);
    color:
        rgba(255, 255, 255, 0.58);

    font-size: 10.5px;
    line-height: 1;
    font-weight: 600;
}

/* =========================================================
   İÇERİK
========================================================= */

.hs-document-content {
    padding: 8px 28px 31px;
}

.hs-document-section {
    padding: 25px 0;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.085);
}

.hs-document-section:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.hs-document-section h3 {
    position: relative;

    margin: 0 0 16px;
    padding-left: 14px;

    color: rgba(255, 255, 255, 0.95);

    font-size: 17px;
    line-height: 1.4;
    font-weight: 600;
    letter-spacing: -0.25px;
}

.hs-document-section h3::before {
    content: "";

    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 0;

    width: 4px;

    border-radius: 999px;

    background: #ffffff;
}

.hs-document-section h4 {
    margin: 20px 0 7px;

    color:
        rgba(255, 255, 255, 0.84);

    font-size: 13px;
    line-height: 1.45;
    font-weight: 600;
}

.hs-document-section h4:first-of-type {
    margin-top: 17px;
}

.hs-document-section p {
    margin: 0 0 13px;

    color:
        rgba(255, 255, 255, 0.6);

    font-size: 13px;
    line-height: 1.85;
    font-weight: 500;
}

.hs-document-section p:last-child {
    margin-bottom: 0;
}

.hs-document-section strong {
    color:
        rgba(255, 255, 255, 0.91);
    font-weight: 600;
}

.hs-document-section a {
    color: #ffffff;

    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;

    transition:
        opacity 0.18s ease;
}

.hs-document-section a:hover {
    opacity: 0.72;
}

/* =========================================================
   MADDE LİSTELERİ
========================================================= */

.hs-document-section ul,
.hs-document-section ol {
    display: grid;
    gap: 10px;

    margin: 14px 0 16px;
    padding: 0;

    list-style: none;
}

.hs-document-section li {
    position: relative;

    padding: 11px 13px 11px 38px;

    border:
        1px solid rgba(255, 255, 255, 0.09);
    border-radius: 13px;

    background:
        rgba(255, 255, 255, 0.04);
    color:
        rgba(255, 255, 255, 0.59);

    font-size: 12.5px;
    line-height: 1.65;
    font-weight: 550;
}

.hs-document-section ul li::before {
    content: "✓";

    position: absolute;
    top: 11px;
    left: 13px;

    width: 17px;
    height: 17px;

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

    border-radius: 50%;

    background: #ffffff;
    color: #050505;

    font-size: 9px;
    line-height: 1;
    font-weight: 700;
}

.hs-document-section ol {
    counter-reset: hs-document-counter;
}

.hs-document-section ol li {
    counter-increment: hs-document-counter;
}

.hs-document-section ol li::before {
    content: counter(hs-document-counter);

    position: absolute;
    top: 10px;
    left: 12px;

    width: 19px;
    height: 19px;

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

    border-radius: 50%;

    background: #ffffff;
    color: #050505;

    font-size: 9px;
    line-height: 1;
    font-weight: 700;
}

/* =========================================================
   TANIM / SAKLAMA SÜRESİ KARTLARI
========================================================= */

.hs-document-definition-list {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 11px;

    margin: 16px 0 18px;
}

.hs-document-definition-item {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 6px;

    padding: 14px 15px;

    border:
        1px solid rgba(255, 255, 255, 0.09);
    border-radius: 14px;

    background:
        rgba(255, 255, 255, 0.04);
}

.hs-document-definition-item strong {
    color:
        rgba(255, 255, 255, 0.88);

    font-size: 11.5px;
    line-height: 1.4;
    font-weight: 600;
}

.hs-document-definition-item span {
    color:
        rgba(255, 255, 255, 0.5);

    font-size: 11px;
    line-height: 1.6;
    font-weight: 500;
}

/* =========================================================
   İLETİŞİM KUTUSU
========================================================= */

.hs-document-contact {
    display: flex;
    flex-direction: column;
    gap: 8px;

    margin-top: 16px;
    padding: 17px 18px;

    border:
        1px solid rgba(255, 255, 255, 0.11);
    border-radius: 16px;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.06) 0%,
            rgba(255, 255, 255, 0.025) 100%
        );
}

.hs-document-contact > strong {
    margin-bottom: 2px;

    color: #ffffff;

    font-size: 14px;
    line-height: 1.4;
    font-weight: 700;
}

.hs-document-contact span {
    color:
        rgba(255, 255, 255, 0.57);

    font-size: 11.5px;
    line-height: 1.55;
    font-weight: 550;
}

.hs-document-contact a {
    color: #ffffff;
}

/* =========================================================
   YARDIMCI METİN KUTULARI
========================================================= */

.hs-document-note,
.hs-document-warning,
.hs-document-info {
    position: relative;

    margin: 17px 0;
    padding: 15px 16px 15px 43px;

    border:
        1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;

    background:
        rgba(255, 255, 255, 0.04);
    color:
        rgba(255, 255, 255, 0.59);

    font-size: 12px;
    line-height: 1.7;
    font-weight: 550;
}

.hs-document-note::before,
.hs-document-warning::before,
.hs-document-info::before {
    position: absolute;
    top: 14px;
    left: 15px;

    width: 19px;
    height: 19px;

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

    border-radius: 50%;

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

.hs-document-note::before {
    content: "i";

    background: #ffffff;
    color: #050505;
}

.hs-document-warning {
    border-color:
        rgba(232, 175, 70, 0.26);
    background:
        rgba(232, 175, 70, 0.08);
    color: #e7c27b;
}

.hs-document-warning::before {
    content: "!";

    background: #d59a32;
    color: #050505;
}

.hs-document-info {
    border-color:
        rgba(111, 168, 224, 0.26);
    background:
        rgba(111, 168, 224, 0.08);
    color: #9cc5eb;
}

.hs-document-info::before {
    content: "i";

    background: #84b8e8;
    color: #050505;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 760px) {
    .hs-document-page {
        margin-bottom: 40px;
    }

    .hs-document-header {
        padding: 21px;
    }

    .hs-document-content {
        padding:
            5px 21px 25px;
    }

    .hs-document-definition-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .hs-document-card {
        border-radius: 18px;
    }

    .hs-document-header {
        align-items: flex-start;
        gap: 13px;

        padding: 17px;
    }

    .hs-document-icon {
        width: 46px;
        height: 46px;

        flex-basis: 46px;

        border-radius: 14px;
    }

    .hs-document-icon svg {
        width: 23px;
        height: 23px;
    }

    .hs-document-title {
        font-size: 17px;
    }

    .hs-document-content {
        padding:
            3px 17px 21px;
    }

    .hs-document-section {
        padding: 21px 0;
    }

    .hs-document-section h3 {
        font-size: 15px;
    }

    .hs-document-section p {
        font-size: 12.2px;
        line-height: 1.75;
    }

    .hs-document-section li {
        padding:
            10px 11px 10px 35px;

        font-size: 11.8px;
    }

    .hs-document-contact {
        padding: 15px;
    }
}

@media (max-width: 360px) {
    .hs-document-header {
        display: block;
    }

    .hs-document-icon {
        margin-bottom: 12px;
    }

    .hs-document-meta {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* =========================================================
   SÖZLEŞMELER LİSTE SAYFASI - KOYU TEMA
========================================================= */

.hs-agreements-page,
.hs-agreements-page *,
.hs-agreements-page *::before,
.hs-agreements-page *::after {
    box-sizing: border-box;
}

.hs-agreements-page {
    width: 100%;
    max-width: 920px;

    margin: 0 auto 56px;
}

/* =========================================================
   ÜST BİLGİ KARTI
========================================================= */

.hs-agreements-intro {
    display: flex;
    align-items: center;
    gap: 17px;

    margin-bottom: 18px;
    padding: 22px 24px;

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.06) 0%,
            rgba(255, 255, 255, 0.025) 100%
        );

    box-shadow:
        0 18px 50px rgba(0, 0, 0, 0.48);
}

.hs-agreements-intro-icon {
    width: 53px;
    height: 53px;

    flex: 0 0 53px;

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

    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 16px;

    background: rgba(255, 255, 255, 0.07);
    color: #ffffff;
}

.hs-agreements-intro-icon svg {
    width: 26px;
    height: 26px;
}

.hs-agreements-intro-content {
    min-width: 0;
}

.hs-agreements-intro-content h2 {
    margin: 0 0 6px;

    color: rgba(255, 255, 255, 0.96);

    font-size: 17px;
    line-height: 1.35;
    font-weight: 600;
    letter-spacing: -0.25px;
}

.hs-agreements-intro-content p {
    margin: 0;

    color: rgba(255, 255, 255, 0.55);

    font-size: 12.5px;
    line-height: 1.65;
    font-weight: 500;
}

/* =========================================================
   SÖZLEŞME KARTLARI
========================================================= */

.hs-agreements-list {
    display: grid;
    gap: 13px;
}

.hs-agreement-card {
    position: relative;

    width: 100%;

    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 17px;

    padding: 19px 20px;

    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 18px;

    background: #050505;
    color: inherit;

    text-decoration: none;

    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.46);

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease;
}

.hs-agreement-card:hover {
    transform: translateY(-2px);

    border-color: rgba(255, 255, 255, 0.18);

    background: #0a0a0a;

    box-shadow:
        0 20px 48px rgba(0, 0, 0, 0.62);
}

.hs-agreement-card:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.2);
    outline-offset: 3px;
}

.hs-agreement-card-icon {
    width: 48px;
    height: 48px;

    flex: 0 0 48px;

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

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 15px;

    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;

    transition:
        transform 0.2s ease,
        background-color 0.2s ease;
}

.hs-agreement-card:hover .hs-agreement-card-icon {
    transform: scale(1.04);
    background: rgba(255, 255, 255, 0.1);
}

.hs-agreement-card-icon svg {
    width: 24px;
    height: 24px;
}

.hs-agreement-card-content {
    min-width: 0;
}

.hs-agreement-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    margin-bottom: 7px;
}

.hs-agreement-card-content h3 {
    margin: 0;

    color: rgba(255, 255, 255, 0.93);

    font-size: 15px;
    line-height: 1.4;
    font-weight: 600;
    letter-spacing: -0.2px;
}

.hs-agreement-card-content p {
    margin: 0;

    color: rgba(255, 255, 255, 0.52);

    font-size: 12px;
    line-height: 1.65;
    font-weight: 500;
}

.hs-agreement-version {
    flex: 0 0 auto;

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

    min-height: 25px;

    padding: 5px 9px;

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;

    background: rgba(255, 255, 255, 0.055);
    color: rgba(255, 255, 255, 0.52);

    font-size: 9.5px;
    line-height: 1;
    font-weight: 600;
}

.hs-agreement-card-arrow {
    width: 34px;
    height: 34px;

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

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.045);
    color: rgba(255, 255, 255, 0.6);

    transition:
        transform 0.2s ease,
        background-color 0.2s ease,
        color 0.2s ease;
}

.hs-agreement-card:hover .hs-agreement-card-arrow {
    transform: translateX(3px);

    background: #ffffff;
    color: #050505;
}

.hs-agreement-card-arrow svg {
    width: 18px;
    height: 18px;
}

/* =========================================================
   ALT BİLGİ
========================================================= */

.hs-agreements-footer-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    margin-top: 18px;
    padding: 14px 16px;

    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 14px;

    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.51);
}

.hs-agreements-footer-note svg {
    width: 18px;
    height: 18px;

    flex: 0 0 18px;

    margin-top: 1px;

    color: rgba(255, 255, 255, 0.77);
}

.hs-agreements-footer-note p {
    margin: 0;

    font-size: 11.5px;
    line-height: 1.6;
    font-weight: 550;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 700px) {
    .hs-agreements-page {
        margin-bottom: 40px;
    }

    .hs-agreements-intro {
        padding: 19px;
    }

    .hs-agreement-card {
        gap: 14px;
        padding: 17px;
    }
}

@media (max-width: 520px) {
    .hs-agreements-intro {
        align-items: flex-start;
        gap: 13px;

        border-radius: 17px;
    }

    .hs-agreements-intro-icon {
        width: 45px;
        height: 45px;

        flex-basis: 45px;

        border-radius: 13px;
    }

    .hs-agreements-intro-icon svg {
        width: 22px;
        height: 22px;
    }

    .hs-agreements-intro-content h2 {
        font-size: 15px;
    }

    .hs-agreements-intro-content p {
        font-size: 11.7px;
    }

    .hs-agreement-card {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 13px;

        padding: 15px;

        border-radius: 16px;
    }

    .hs-agreement-card-icon {
        width: 44px;
        height: 44px;

        flex-basis: 44px;

        border-radius: 13px;
    }

    .hs-agreement-card-icon svg {
        width: 22px;
        height: 22px;
    }

    .hs-agreement-card-arrow {
        display: none;
    }

    .hs-agreement-card-top {
        align-items: flex-start;
    }

    .hs-agreement-card-content h3 {
        font-size: 13.5px;
    }

    .hs-agreement-card-content p {
        font-size: 11.3px;
        line-height: 1.55;
    }

    .hs-agreement-version {
        font-size: 8.5px;
    }
}

@media (max-width: 390px) {
    .hs-agreement-card-top {
        display: block;
    }

    .hs-agreement-version {
        margin-top: 7px;
    }
}

/* =========================================================
   ÜYE İLETİŞİM SAYFASI - KOYU TEMA
========================================================= */

.hs-contact-page,
.hs-contact-page *,
.hs-contact-page *::before,
.hs-contact-page *::after {
    box-sizing: border-box;
}

.hs-contact-page {
    width: 100%;
    max-width: 820px;

    margin: 0 auto 56px;
}

.hs-contact-card {
    display: flex;
    align-items: flex-start;
    gap: 22px;

    padding: 29px;

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 23px;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.055) 0%,
            rgba(255, 255, 255, 0.018) 100%
        );

    box-shadow:
        0 20px 54px rgba(0, 0, 0, 0.55);
}

.hs-contact-icon {
    width: 62px;
    height: 62px;

    flex: 0 0 62px;

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

    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 19px;

    background: rgba(255, 255, 255, 0.07);
    color: #ffffff;
}

.hs-contact-icon svg {
    width: 29px;
    height: 29px;
}

.hs-contact-content {
    min-width: 0;
    flex: 1;
}

.hs-contact-label {
    display: inline-flex;
    align-items: center;

    margin-bottom: 9px;
    padding: 6px 10px;

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;

    background: rgba(255, 255, 255, 0.055);
    color: rgba(255, 255, 255, 0.55);

    font-size: 10px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0.35px;
    text-transform: uppercase;
}

.hs-contact-content h2 {
    margin: 0 0 11px;

    color: rgba(255, 255, 255, 0.96);

    font-size: 21px;
    line-height: 1.35;
    font-weight: 600;
    letter-spacing: -0.4px;
}

.hs-contact-content > p {
    max-width: 650px;

    margin: 0 0 21px;

    color: rgba(255, 255, 255, 0.57);

    font-size: 13px;
    line-height: 1.8;
    font-weight: 500;
}

/* =========================================================
   E-POSTA BAĞLANTISI
========================================================= */

.hs-contact-mail {
    width: 100%;

    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;

    padding: 15px 16px;

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;

    background: #050505;
    color: inherit;

    text-decoration: none;

    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.45);

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease;
}

.hs-contact-mail:hover {
    transform: translateY(-2px);

    border-color: rgba(255, 255, 255, 0.19);
    background: #0a0a0a;

    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.62);
}

.hs-contact-mail:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.2);
    outline-offset: 3px;
}

.hs-contact-mail-icon {
    width: 42px;
    height: 42px;

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

    border-radius: 13px;

    background: #ffffff;
    color: #050505;
}

.hs-contact-mail-icon svg {
    width: 20px;
    height: 20px;
}

.hs-contact-mail-content {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hs-contact-mail-content small {
    color: rgba(255, 255, 255, 0.44);

    font-size: 10px;
    line-height: 1.3;
    font-weight: 600;
}

.hs-contact-mail-content strong {
    overflow: hidden;

    color: rgba(255, 255, 255, 0.9);

    font-size: 13px;
    line-height: 1.4;
    font-weight: 600;

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

.hs-contact-mail-arrow {
    width: 31px;
    height: 31px;

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

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.045);
    color: rgba(255, 255, 255, 0.58);

    transition:
        transform 0.2s ease,
        background-color 0.2s ease,
        color 0.2s ease;
}

.hs-contact-mail:hover .hs-contact-mail-arrow {
    transform: translateX(3px);

    background: #ffffff;
    color: #050505;
}

.hs-contact-mail-arrow svg {
    width: 17px;
    height: 17px;
}

/* =========================================================
   BİLGİ NOTU
========================================================= */

.hs-contact-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    margin-top: 17px;
    padding: 13px 15px;

    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 14px;

    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.51);
}

.hs-contact-note svg {
    width: 18px;
    height: 18px;

    flex: 0 0 18px;

    margin-top: 1px;

    color: rgba(255, 255, 255, 0.75);
}

.hs-contact-note p {
    margin: 0;

    font-size: 11.5px;
    line-height: 1.65;
    font-weight: 550;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 700px) {
    .hs-contact-page {
        margin-bottom: 40px;
    }

    .hs-contact-card {
        gap: 17px;
        padding: 23px;
    }
}

@media (max-width: 520px) {
    .hs-contact-card {
        display: block;

        padding: 18px;

        border-radius: 18px;
    }

    .hs-contact-icon {
        width: 50px;
        height: 50px;

        margin-bottom: 15px;

        border-radius: 15px;
    }

    .hs-contact-icon svg {
        width: 24px;
        height: 24px;
    }

    .hs-contact-content h2 {
        font-size: 17px;
    }

    .hs-contact-content > p {
        font-size: 12px;
        line-height: 1.7;
    }

    .hs-contact-mail {
        gap: 10px;
        padding: 13px;
    }

    .hs-contact-mail-icon {
        width: 38px;
        height: 38px;

        border-radius: 11px;
    }

    .hs-contact-mail-content strong {
        font-size: 11.5px;
    }

    .hs-contact-mail-arrow {
        display: none;
    }
}

@media (max-width: 370px) {
    .hs-contact-mail-content strong {
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

/* =========================================================
   ENGELLENENLER SAYFASI - KOYU TEMA
========================================================= */

.hs-blocked-page,
.hs-blocked-page *,
.hs-blocked-page *::before,
.hs-blocked-page *::after {
    box-sizing: border-box;
}

.hs-blocked-page {
    width: 100%;
    max-width: 820px;

    margin: 0 auto 60px;
}

/* =========================================================
   ÜST ALAN
========================================================= */

.hs-blocked-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;

    margin-bottom: 20px;
}

.hs-blocked-search {
    min-width: 0;
    height: 52px;

    position: relative;

    display: flex;
    align-items: center;

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;

    background: rgba(255, 255, 255, 0.045);

    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.28);

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease;
}

.hs-blocked-search:focus-within {
    border-color: rgba(255, 255, 255, 0.23);

    background: rgba(255, 255, 255, 0.06);

    box-shadow:
        0 0 0 4px rgba(255, 255, 255, 0.055),
        0 12px 30px rgba(0, 0, 0, 0.38);
}

.hs-blocked-search-icon {
    width: 50px;
    height: 100%;

    flex: 0 0 50px;

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

    color: rgba(255, 255, 255, 0.47);

    font-size: 15px;
}

.hs-blocked-search-input {
    width: 100%;
    min-width: 0;
    height: 100%;

    padding: 0 8px 0 0;

    border: 0;
    outline: 0;

    background: transparent;
    color: rgba(255, 255, 255, 0.93);

    font: inherit;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 600;
}

.hs-blocked-search-input::placeholder {
    color: rgba(255, 255, 255, 0.38);
    opacity: 1;
}

.hs-blocked-search-input::-webkit-search-cancel-button {
    display: none;
}

.hs-blocked-search-clear {
    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    margin-right: 9px;

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

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;

    background: rgba(255, 255, 255, 0.055);
    color: rgba(255, 255, 255, 0.56);

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
}

.hs-blocked-search-clear:hover {
    border-color: rgba(255, 255, 255, 0.17);
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.hs-blocked-search-clear[hidden] {
    display: none;
}

/* =========================================================
   TOPLAM BİLGİSİ
========================================================= */

.hs-blocked-summary {
    min-width: 185px;
    height: 52px;

    display: flex;
    align-items: center;
    gap: 11px;

    padding: 8px 14px 8px 9px;

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;

    background: rgba(255, 255, 255, 0.045);

    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.28);
}

.hs-blocked-summary-icon {
    width: 34px;
    height: 34px;

    flex: 0 0 34px;

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

    border-radius: 11px;

    background: rgba(239, 83, 80, 0.14);
    color: #ff7774;

    font-size: 13px;
}

.hs-blocked-summary-content {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hs-blocked-summary-label {
    color: rgba(255, 255, 255, 0.4);

    font-size: 9px;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: 0.2px;
    text-transform: uppercase;
}

.hs-blocked-summary-content strong {
    color: rgba(255, 255, 255, 0.9);

    font-size: 12px;
    line-height: 1.35;
    font-weight: 600;
}

/* =========================================================
   KULLANICI LİSTESİ
========================================================= */

.hs-blocked-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hs-blocked-user-card {
    width: 100%;

    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 13px;

    padding: 5px 14px 5px 5px;

    border: 1px solid rgba(255, 255, 255, 0.095);
    border-radius: 19px;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.055) 0%,
            rgba(255, 255, 255, 0.025) 100%
        );

    color: inherit;
    text-decoration: none;

    box-shadow:
        0 11px 30px rgba(0, 0, 0, 0.3);

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease;
}

.hs-blocked-user-card:hover {
    transform: translateY(-2px);

    border-color: rgba(255, 255, 255, 0.18);

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.075) 0%,
            rgba(255, 255, 255, 0.04) 100%
        );

    box-shadow:
        0 17px 38px rgba(0, 0, 0, 0.46);
}

.hs-blocked-user-card:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.18);
    outline-offset: 3px;
}

/* =========================================================
   PROFİL RESMİ
========================================================= */

.hs-blocked-avatar-wrapper {
    width: 58px;
    height: 58px;

    position: relative;

    flex: 0 0 58px;
}

.hs-blocked-avatar {
    width: 58px;
    height: 58px;

    position: relative;
    overflow: hidden;

    display: grid;
    place-items: center;

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;

    background: rgba(255, 255, 255, 0.06);
}

.hs-blocked-avatar img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}

.hs-blocked-avatar-fallback {
    width: 100%;
    height: 100%;

    display: grid;
    place-items: center;

    background:
        linear-gradient(
            145deg,
            #303030,
            #1d1d1d
        );

    color: rgba(255, 255, 255, 0.76);

    font-size: 20px;
    line-height: 1;
    font-weight: 700;
}

.hs-blocked-avatar-fallback[hidden] {
    display: none;
}

.hs-blocked-badge {
    width: 22px;
    height: 22px;

    position: absolute;
    right: -4px;
    bottom: -3px;

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

    border: 3px solid #111111;
    border-radius: 50%;

    background: #ef5350;
    color: #ffffff;

    font-size: 9px;

    box-shadow:
        0 4px 12px rgba(239, 83, 80, 0.28);
}

/* =========================================================
   KULLANICI BİLGİSİ
========================================================= */

.hs-blocked-user-content {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hs-blocked-user-name {
    overflow: hidden;

    color: rgba(255, 255, 255, 0.94);

    font-size: 13.5px;
    line-height: 1.4;
    font-weight: 600;

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

.hs-blocked-user-username {
    overflow: hidden;

    color: rgba(255, 255, 255, 0.55);

    font-size: 11.5px;
    line-height: 1.4;
    font-weight: 600;

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

.hs-blocked-user-status {
    padding: 6px 9px;

    border: 1px solid rgba(239, 83, 80, 0.22);
    border-radius: 999px;

    background: rgba(239, 83, 80, 0.1);
    color: #ff7b78;

    font-size: 9px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0.2px;
    text-transform: uppercase;
}

.hs-blocked-user-arrow {
    width: 30px;
    height: 30px;

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

    border: 1px solid rgba(255, 255, 255, 0.095);
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.045);
    color: rgba(255, 255, 255, 0.48);

    font-size: 10px;

    transition:
        transform 0.2s ease,
        background-color 0.2s ease,
        color 0.2s ease;
}

.hs-blocked-user-card:hover .hs-blocked-user-arrow {
    transform: translateX(3px);

    background: #ffffff;
    color: #111111;
}

/* =========================================================
   YÜKLENİYOR
========================================================= */

.hs-blocked-loader {
    min-height: 160px;

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

    color: rgba(255, 255, 255, 0.48);

    font-size: 11.5px;
    line-height: 1.5;
    font-weight: 600;
}

.hs-blocked-loader[hidden] {
    display: none;
}

.hs-blocked-more-loader {
    min-height: auto;
    padding: 25px 0 10px;
}

.hs-blocked-spinner {
    width: 28px;
    height: 28px;

    display: block;

    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top-color: rgba(255, 255, 255, 0.73);
    border-radius: 50%;

    animation:
        hs-blocked-spin 0.75s linear infinite;
}

@keyframes hs-blocked-spin {
    to {
        transform: rotate(360deg);
    }
}

/* =========================================================
   BOŞ VE HATA DURUMU
========================================================= */

.hs-blocked-state {
    min-height: 280px;

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

    padding: 35px 20px;

    border: 1px dashed rgba(255, 255, 255, 0.12);
    border-radius: 20px;

    background: rgba(255, 255, 255, 0.025);

    text-align: center;
}

.hs-blocked-state[hidden] {
    display: none;
}

.hs-blocked-state-icon {
    width: 54px;
    height: 54px;

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

    margin-bottom: 16px;

    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 17px;

    background: rgba(255, 255, 255, 0.055);
    color: rgba(255, 255, 255, 0.68);

    font-size: 20px;

    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.3);
}

.hs-blocked-state h2 {
    margin: 0 0 8px;

    color: rgba(255, 255, 255, 0.9);

    font-size: 15px;
    line-height: 1.4;
    font-weight: 600;
}

.hs-blocked-state p {
    max-width: 410px;

    margin: 0;

    color: rgba(255, 255, 255, 0.48);

    font-size: 11.5px;
    line-height: 1.7;
    font-weight: 550;
}

.hs-blocked-error-state .hs-blocked-state-icon {
    border-color: rgba(239, 83, 80, 0.22);
    background: rgba(239, 83, 80, 0.1);
    color: #ff7774;
}

.hs-blocked-retry {
    min-height: 40px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    margin-top: 18px;
    padding: 0 16px;

    border: 0;
    border-radius: 12px;

    background: #ffffff;
    color: #111111;

    font: inherit;
    font-size: 11px;
    font-weight: 600;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
}

.hs-blocked-retry:hover {
    transform: translateY(-1px);
    opacity: 0.88;
}

.hs-blocked-sentinel {
    width: 100%;
    height: 2px;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 700px) {
    .hs-blocked-page {
        margin-bottom: 45px;
    }

    .hs-blocked-toolbar {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .hs-blocked-summary {
        min-width: 0;
        width: 100%;
    }
}

@media (max-width: 520px) {
    .hs-blocked-search,
    .hs-blocked-summary {
        height: 49px;
        border-radius: 14px;
    }

    .hs-blocked-user-card {
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 11px;

        padding-right: 11px;

        border-radius: 17px;
    }

    .hs-blocked-avatar-wrapper,
    .hs-blocked-avatar {
        width: 54px;
        height: 54px;
    }

    .hs-blocked-avatar {
        border-radius: 14px;
    }

    .hs-blocked-user-status {
        display: none;
    }

    .hs-blocked-user-arrow {
        width: 28px;
        height: 28px;
    }
}

@media (max-width: 390px) {
    .hs-blocked-user-card {
        gap: 9px;
    }

    .hs-blocked-user-name {
        font-size: 12.5px;
    }

    .hs-blocked-user-username {
        font-size: 10.5px;
    }
}

/* =========================================================
   ÜYE TAKİPÇİLERİ - KOYU TEMA
========================================================= */

.hs-followers-partial,
.hs-followers-partial *,
.hs-followers-partial *::before,
.hs-followers-partial *::after {
    box-sizing: border-box;
}

.hs-followers-partial {
    width: 100%;
    max-width: 820px;

    margin: 0 auto 60px;
}

/* =========================================================
   ÜST ARAÇ ÇUBUĞU
========================================================= */

.hs-followers-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;

    margin-bottom: 14px;
}

.hs-followers-search {
    min-width: 0;
    height: 52px;

    position: relative;

    display: flex;
    align-items: center;

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;

    background: rgba(255, 255, 255, 0.045);

    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.28);

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease;
}

.hs-followers-search:focus-within {
    border-color: rgba(255, 255, 255, 0.23);

    background: rgba(255, 255, 255, 0.06);

    box-shadow:
        0 0 0 4px rgba(255, 255, 255, 0.055),
        0 12px 30px rgba(0, 0, 0, 0.38);
}

.hs-followers-search-icon {
    width: 50px;
    height: 100%;

    flex: 0 0 50px;

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

    color: rgba(255, 255, 255, 0.47);

    font-size: 15px;
}

.hs-followers-search-input {
    width: 100%;
    min-width: 0;
    height: 100%;

    padding: 0 8px 0 0;

    border: 0;
    outline: 0;

    background: transparent;
    color: rgba(255, 255, 255, 0.93);

    font: inherit;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 600;
}

.hs-followers-search-input::placeholder {
    color: rgba(255, 255, 255, 0.38);
    opacity: 1;
}

.hs-followers-search-input::-webkit-search-cancel-button {
    display: none;
}

.hs-followers-search-clear {
    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    margin-right: 9px;

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

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;

    background: rgba(255, 255, 255, 0.055);
    color: rgba(255, 255, 255, 0.56);

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
}

.hs-followers-search-clear:hover {
    border-color: rgba(255, 255, 255, 0.17);
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.hs-followers-search-clear[hidden] {
    display: none;
}

/* =========================================================
   TAKİPÇİ SAYISI
========================================================= */

.hs-followers-summary {
    min-width: 170px;
    height: 52px;

    display: flex;
    align-items: center;
    gap: 11px;

    padding: 8px 14px 8px 9px;

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;

    background: rgba(255, 255, 255, 0.045);

    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.28);
}

.hs-followers-summary-icon {
    width: 34px;
    height: 34px;

    flex: 0 0 34px;

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

    border-radius: 11px;

    background: rgba(100, 130, 219, 0.16);
    color: #8ca8ff;

    font-size: 13px;
}

.hs-followers-summary-content {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hs-followers-summary-label {
    color: rgba(255, 255, 255, 0.4);

    font-size: 9px;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: 0.2px;
    text-transform: uppercase;
}

.hs-followers-summary-content strong {
    color: rgba(255, 255, 255, 0.9);

    font-size: 12px;
    line-height: 1.35;
    font-weight: 600;
}

/* =========================================================
   ORTAK TAKİPÇİ
========================================================= */

.hs-followers-mutual {
    display: flex;
    align-items: center;
    gap: 9px;

    margin-bottom: 14px;
    padding: 10px 13px;

    border: 1px solid rgba(111, 145, 232, 0.18);
    border-radius: 13px;

    background: rgba(91, 120, 199, 0.09);
    color: #9eb3ef;

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

.hs-followers-mutual i {
    font-size: 12px;
}

.hs-followers-mutual[hidden] {
    display: none;
}

/* =========================================================
   KULLANICI LİSTESİ
========================================================= */

.hs-followers-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hs-followers-user-card {
    width: 100%;

    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 13px;

    padding: 5px 14px 5px 5px;

    border: 1px solid rgba(255, 255, 255, 0.095);
    border-radius: 19px;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.055) 0%,
            rgba(255, 255, 255, 0.025) 100%
        );

    color: inherit;
    text-decoration: none;

    box-shadow:
        0 11px 30px rgba(0, 0, 0, 0.3);

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease;
}

.hs-followers-user-card:hover {
    transform: translateY(-2px);

    border-color: rgba(255, 255, 255, 0.18);

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.075) 0%,
            rgba(255, 255, 255, 0.04) 100%
        );

    box-shadow:
        0 17px 38px rgba(0, 0, 0, 0.46);
}

.hs-followers-user-card:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.18);
    outline-offset: 3px;
}

/* =========================================================
   PROFİL RESMİ
========================================================= */

.hs-followers-avatar-wrapper {
    width: 58px;
    height: 58px;

    position: relative;

    flex: 0 0 58px;
}

.hs-followers-avatar {
    width: 58px;
    height: 58px;

    position: relative;
    overflow: hidden;

    display: grid;
    place-items: center;

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;

    background: rgba(255, 255, 255, 0.06);
}

.hs-followers-avatar img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}

.hs-followers-avatar-fallback {
    width: 100%;
    height: 100%;

    display: grid;
    place-items: center;

    background:
        linear-gradient(
            145deg,
            #303030,
            #1d1d1d
        );

    color: rgba(255, 255, 255, 0.76);

    font-size: 20px;
    line-height: 1;
    font-weight: 700;
}

.hs-followers-avatar-fallback[hidden] {
    display: none;
}

.hs-followers-avatar-badge {
    width: 22px;
    height: 22px;

    position: absolute;
    right: -4px;
    bottom: -3px;

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

    border: 3px solid #111111;
    border-radius: 50%;

    background: #708bd8;
    color: #ffffff;

    font-size: 8px;

    box-shadow:
        0 4px 12px rgba(92, 120, 205, 0.3);
}

/* =========================================================
   KULLANICI BİLGİLERİ
========================================================= */

.hs-followers-user-content {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hs-followers-user-name {
    overflow: hidden;

    color: rgba(255, 255, 255, 0.94);

    font-size: 13.5px;
    line-height: 1.4;
    font-weight: 600;

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

.hs-followers-user-username {
    overflow: hidden;

    color: rgba(255, 255, 255, 0.55);

    font-size: 11.5px;
    line-height: 1.4;
    font-weight: 600;

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

.hs-followers-user-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    padding: 6px 9px;

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;

    background: rgba(255, 255, 255, 0.045);
    color: rgba(255, 255, 255, 0.52);

    font-size: 9px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0.1px;

    white-space: nowrap;
}

.hs-followers-user-status.is-following {
    border-color: rgba(105, 137, 226, 0.22);
    background: rgba(84, 113, 198, 0.12);
    color: #9eb6ff;
}

.hs-followers-user-status.is-me {
    border-color: rgba(91, 170, 116, 0.2);
    background: rgba(75, 151, 100, 0.1);
    color: #89d5a2;
}

.hs-followers-user-arrow {
    width: 30px;
    height: 30px;

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

    border: 1px solid rgba(255, 255, 255, 0.095);
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.045);
    color: rgba(255, 255, 255, 0.48);

    font-size: 10px;

    transition:
        transform 0.2s ease,
        background-color 0.2s ease,
        color 0.2s ease;
}

.hs-followers-user-card:hover
.hs-followers-user-arrow {
    transform: translateX(3px);

    background: #ffffff;
    color: #111111;
}

/* =========================================================
   YÜKLENME
========================================================= */

.hs-followers-loader {
    min-height: 160px;

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

    color: rgba(255, 255, 255, 0.48);

    font-size: 11.5px;
    line-height: 1.5;
    font-weight: 600;
}

.hs-followers-loader[hidden] {
    display: none;
}

.hs-followers-more-loader {
    min-height: auto;
    padding: 25px 0 10px;
}

.hs-followers-spinner {
    width: 28px;
    height: 28px;

    display: block;

    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top-color: rgba(255, 255, 255, 0.73);
    border-radius: 50%;

    animation:
        hs-followers-spin 0.75s linear infinite;
}

@keyframes hs-followers-spin {
    to {
        transform: rotate(360deg);
    }
}

/* =========================================================
   BOŞ VE HATA DURUMU
========================================================= */

.hs-followers-state {
    min-height: 260px;

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

    padding: 35px 20px;

    border: 1px dashed rgba(255, 255, 255, 0.12);
    border-radius: 20px;

    background: rgba(255, 255, 255, 0.025);

    text-align: center;
}

.hs-followers-state[hidden] {
    display: none;
}

.hs-followers-state-icon {
    width: 54px;
    height: 54px;

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

    margin-bottom: 16px;

    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 17px;

    background: rgba(255, 255, 255, 0.055);
    color: rgba(255, 255, 255, 0.68);

    font-size: 20px;

    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.3);
}

.hs-followers-state h3 {
    margin: 0 0 8px;

    color: rgba(255, 255, 255, 0.9);

    font-size: 15px;
    line-height: 1.4;
    font-weight: 600;
}

.hs-followers-state p {
    max-width: 410px;

    margin: 0;

    color: rgba(255, 255, 255, 0.48);

    font-size: 11.5px;
    line-height: 1.7;
    font-weight: 550;
}

.hs-followers-error-state
.hs-followers-state-icon {
    border-color: rgba(239, 83, 80, 0.22);
    background: rgba(239, 83, 80, 0.1);
    color: #ff7774;
}

.hs-followers-retry {
    min-height: 40px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    margin-top: 18px;
    padding: 0 16px;

    border: 0;
    border-radius: 12px;

    background: #ffffff;
    color: #111111;

    font: inherit;
    font-size: 11px;
    font-weight: 600;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
}

.hs-followers-retry:hover {
    transform: translateY(-1px);
    opacity: 0.88;
}

.hs-followers-sentinel {
    width: 100%;
    height: 2px;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 700px) {
    .hs-followers-partial {
        margin-bottom: 45px;
    }

    .hs-followers-toolbar {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .hs-followers-summary {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 520px) {
    .hs-followers-search,
    .hs-followers-summary {
        height: 49px;
        border-radius: 14px;
    }

    .hs-followers-user-card {
        grid-template-columns:
            auto minmax(0, 1fr) auto;

        gap: 11px;
        padding-right: 11px;

        border-radius: 17px;
    }

    .hs-followers-avatar-wrapper,
    .hs-followers-avatar {
        width: 54px;
        height: 54px;
    }

    .hs-followers-avatar {
        border-radius: 14px;
    }

    .hs-followers-user-status {
        display: none;
    }

    .hs-followers-user-arrow {
        width: 28px;
        height: 28px;
    }
}

@media (max-width: 390px) {
    .hs-followers-user-card {
        gap: 9px;
    }

    .hs-followers-user-name {
        font-size: 12.5px;
    }

    .hs-followers-user-username {
        font-size: 10.5px;
    }
}

/* =========================================================
   ÜYE MEKANLARI
========================================================= */

.hs-places-partial {
    width: 100%;
    max-width: 920px;
    margin: 0 auto;
}

.hs-places-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    gap: 14px;

    margin-bottom: 16px;
}

.hs-places-search {
    position: relative;

    display: flex;
    align-items: center;

    min-width: 0;
}

.hs-places-search-icon {
    position: absolute;
    left: 16px;
    z-index: 2;

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

    color: #9a9a9a;
    font-size: 15px;

    pointer-events: none;
}

.hs-places-search-input {
    width: 100%;
    min-height: 50px;

    padding: 0 48px 0 44px;

    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 14px;

    outline: none;

    background: #050505;
    color: #ffffff;

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

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease;
}

.hs-places-search-input::placeholder {
    color: rgba(255, 255, 255, 0.45);
    font-weight: 500;
}

.hs-places-search-input:focus {
    border-color: rgba(255, 255, 255, 0.24);

    box-shadow:
        0 0 0 4px rgba(255, 255, 255, 0.045);
}

.hs-places-search-clear {
    position: absolute;
    right: 12px;
    z-index: 2;

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

    width: 30px;
    height: 30px;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.09);
    color: rgba(255, 255, 255, 0.72);

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.hs-places-search-clear:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;

    transform: scale(1.04);
}

.hs-places-summary {
    display: flex;
    align-items: center;
    gap: 11px;

    min-width: 200px;
    min-height: 50px;

    padding: 8px 16px;

    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 14px;

    background: #050505;
}

.hs-places-summary-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    border-radius: 11px;

    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;

    font-size: 14px;
}

.hs-places-summary-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hs-places-summary-label {
    color: rgba(255, 255, 255, 0.48);

    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.hs-places-summary-content strong {
    color: #ffffff;

    font-size: 13px;
    font-weight: 600;
}

.hs-places-mutual {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 16px;
    padding: 13px 15px;

    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 14px;

    background: rgba(255, 255, 255, 0.045);
    color: rgba(255, 255, 255, 0.86);

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

.hs-places-mutual[hidden] {
    display: none;
}

.hs-places-mutual-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 29px;
    height: 29px;

    flex: 0 0 29px;

    border-radius: 9px;

    background: #050505;
    color: #ffffff;

    font-size: 12px;
}

.hs-places-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hs-place-card {
    position: relative;

    display: flex;
    align-items: center;
    gap: 13px;

    min-width: 0;
    min-height: 78px;

    padding: 8px 46px 8px 8px;

    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 18px;

    background: rgba(255, 255, 255, 0.07);
    color: inherit;

    text-decoration: none;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease;
}

.hs-place-card:hover {
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.10);

    box-shadow:
        0 9px 26px rgba(0, 0, 0, 0.22);

    transform: translateY(-1px);
}

.hs-place-image-wrapper {
    position: relative;

    width: 62px;
    height: 62px;

    flex: 0 0 62px;
}

.hs-place-image {
    position: relative;

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

    width: 62px;
    height: 62px;

    overflow: hidden;

    border-radius: 15px;

    background: #ffffff;
}

.hs-place-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.hs-place-image-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    background: #ffffff;
    color: #050505;

    font-size: 25px;
}

.hs-place-image-fallback[hidden] {
    display: none;
}

.hs-place-location-badge {
    position: absolute;
    right: -4px;
    bottom: -4px;

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

    width: 24px;
    height: 24px;

    border: 3px solid #292929;
    border-radius: 50%;

    background: #050505;
    color: #ffffff;

    font-size: 11px;

    box-sizing: border-box;
}

.hs-place-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;

    min-width: 0;
}

.hs-place-title {
    display: block;

    overflow: hidden;

    color: #ffffff;

    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;

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

.hs-place-subtitle {
    display: block;

    margin-top: 3px;

    overflow: hidden;

    color: rgba(255, 255, 255, 0.68);

    font-size: 11.5px;
    font-weight: 550;
    line-height: 1.4;

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

.hs-place-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;

    min-height: 20px;
    margin-top: 7px;
}

.hs-place-price-score {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 20px;

    padding: 3px 8px;

    border-radius: 999px;

    color: #ffffff;

    font-size: 9.5px;
    font-weight: 600;
    line-height: 1;
}

.hs-place-price-score.is-very-affordable {
    background: #5fa85a;
}

.hs-place-price-score.is-affordable {
    background: #3f5f14;
}

.hs-place-price-score.is-expensive {
    background: #c8172d;
}

.hs-place-price-score.is-very-expensive {
    background: #850015;
}

.hs-place-price-score.is-neutral {
    background: #050505;
}

.hs-place-google-rating {
    display: inline-flex;
    align-items: center;
    gap: 4px;

    color: #ffa726;

    font-size: 11.5px;
    font-weight: 600;
}

.hs-place-google-rating i {
    font-size: 13px;
}

.hs-place-category {
    max-width: 190px;

    overflow: hidden;

    color: rgba(255, 255, 255, 0.42);

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

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

.hs-place-follow-indicator {
    position: absolute;
    top: 8px;
    right: 8px;

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

    width: 21px;
    height: 21px;

    border-radius: 50%;

    background: #23c55e;
    color: #ffffff;

    font-size: 10px;

    box-shadow:
        0 3px 9px rgba(35, 197, 94, 0.28);
}

.hs-place-arrow {
    position: absolute;
    right: 16px;
    top: 50%;

    color: rgba(255, 255, 255, 0.30);

    font-size: 12px;

    transform: translateY(-50%);
    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

.hs-place-card:hover .hs-place-arrow {
    color: rgba(255, 255, 255, 0.78);

    transform:
        translateY(-50%)
        translateX(2px);
}

.hs-places-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;

    min-height: 110px;

    color: rgba(255, 255, 255, 0.62);

    font-size: 12px;
    font-weight: 600;
}

.hs-places-loader[hidden] {
    display: none;
}

.hs-places-more-loader {
    min-height: 70px;
}

.hs-places-spinner {
    width: 21px;
    height: 21px;

    border: 3px solid rgba(255, 255, 255, 0.14);
    border-top-color: rgba(255, 255, 255, 0.72);
    border-radius: 50%;

    animation:
        hsPlacesSpin 0.75s linear infinite;
}

@keyframes hsPlacesSpin {
    to {
        transform: rotate(360deg);
    }
}

.hs-places-state {
    display: flex;
    align-items: center;
    flex-direction: column;

    padding: 54px 20px;

    text-align: center;
}

.hs-places-state[hidden] {
    display: none;
}

.hs-places-state-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 62px;
    height: 62px;

    margin-bottom: 15px;

    border-radius: 19px;

    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.76);

    font-size: 24px;
}

.hs-places-state h3 {
    margin: 0;

    color: #ffffff;

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

.hs-places-state p {
    max-width: 420px;

    margin: 8px 0 0;

    color: rgba(255, 255, 255, 0.52);

    font-size: 12.5px;
    font-weight: 550;
    line-height: 1.6;
}

.hs-places-error-state .hs-places-state-icon {
    background: rgba(198, 40, 40, 0.14);
    color: #ff6b6b;
}

.hs-places-retry {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-height: 40px;

    margin-top: 18px;
    padding: 0 16px;

    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 11px;

    background: rgba(255, 255, 255, 0.09);
    color: #ffffff;

    font-family: inherit;
    font-size: 12px;
    font-weight: 600;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        background-color 0.2s ease;
}

.hs-places-retry:hover {
    background: rgba(255, 255, 255, 0.15);

    transform: translateY(-1px);
}

.hs-places-sentinel {
    width: 100%;
    height: 1px;
}

@media (max-width: 700px) {
    .hs-places-toolbar {
        grid-template-columns: 1fr;
    }

    .hs-places-summary {
        min-width: 0;
    }

    .hs-place-card {
        min-height: 76px;

        padding-right: 40px;
    }

    .hs-place-image-wrapper,
    .hs-place-image {
        width: 58px;
        height: 58px;

        flex-basis: 58px;
    }

    .hs-place-category {
        display: none;
    }

    .hs-place-arrow {
        right: 13px;
    }
}

/* =========================================================
   BAŞKA ÜYE PROFİLİ
   ========================================================= */

.hs-other-profile {
    position: relative;
}

.hs-other-profile-content[hidden],
.hs-other-profile-loading[hidden],
.hs-other-profile-state[hidden],
.hs-other-profile-feed[hidden],
.hs-other-profile-common[hidden],
.hs-other-profile-unblock-button[hidden],
.hs-other-profile-menu[hidden] {
    display: none !important;
}

.hs-other-profile-loading {
    min-height: 190px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    color: rgba(255, 255, 255, 0.68);

    font-size: 13px;
    font-weight: 600;
}

.hs-other-profile-spinner,
.hs-confirm-modal-spinner {
    display: inline-block;

    width: 20px;
    height: 20px;

    border: 2px solid rgba(255, 255, 255, 0.18);
    border-top-color: #ffffff;
    border-radius: 50%;

    animation: hs-other-profile-spin 0.75s linear infinite;
}

@keyframes hs-other-profile-spin {
    to {
        transform: rotate(360deg);
    }
}

.hs-other-profile-image-link {
    cursor: default;
}

.hs-other-profile-menu {
    flex: 0 0 auto;
}

.hs-other-profile-menu-button {
    width: 38px;
    height: 38px;

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

    padding: 0;

    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;

    background: #050505;
    color: #ffffff;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.hs-other-profile-menu-button:hover {
    background: #454545;
    border-color: rgba(255, 255, 255, 0.24);
}

.hs-other-profile-menu-button:active {
    transform: scale(0.96);
}

.hs-other-profile-menu-button svg {
    width: 22px;
    height: 22px;
}

.hs-other-profile-menu-list {
    right: 0;
    left: auto;

    min-width: 155px;
}

.hs-other-profile-menu-list button {
    width: 100%;

    border: 0;

    text-align: left;
    cursor: pointer;
}

.hs-other-profile-bio {
    width: 100%;

    cursor: default;
}

.hs-other-profile-common {
    width: 100%;

    display: flex;
    align-items: flex-start;
    gap: 12px;

    margin-top: 16px;
    padding: 15px 16px;

    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 16px;

    background: rgba(102, 102, 102, 0.12);
    color: rgba(255, 255, 255, 0.82);
}

.hs-other-profile-common > svg {
    flex: 0 0 auto;

    width: 21px;
    height: 21px;

    margin-top: 1px;

    color: rgba(255, 255, 255, 0.7);
}

.hs-other-profile-common-text {
    display: flex;
    flex-direction: column;
    gap: 4px;

    font-size: 13px;
    line-height: 1.45;
    font-weight: 600;
}

.hs-other-profile-actions {
    margin-top: 18px;
}

.hs-other-profile-follow-button,
.hs-other-profile-unblock-button {
    flex: 1 1 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.hs-other-profile-follow-button
[data-follow-button-icon] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.hs-other-profile-follow-button
[data-follow-button-icon] svg {
    width: 17px;
    height: 17px;
}

.hs-other-profile-follow-button.is-following {
    border-color: #23c55e;
    background: rgba(35, 197, 94, 0.10);
    color: #23c55e;
}

.hs-other-profile-follow-button.is-disabled {
    opacity: 0.42;
    cursor: not-allowed;
}

.hs-other-profile-unblock-button {
    border-color: #777777;
    color: #d0d0d0;
}

.hs-other-profile-state {
    min-height: 260px;

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

    padding: 36px 20px;

    text-align: center;
}

.hs-other-profile-state-icon {
    width: 62px;
    height: 62px;

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

    margin-bottom: 16px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.68);
}

.hs-other-profile-state-icon svg {
    width: 30px;
    height: 30px;
}

.hs-other-profile-state-title {
    color: #ffffff;

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

.hs-other-profile-state-description {
    max-width: 420px;

    margin: 8px 0 0;

    color: rgba(255, 255, 255, 0.62);

    font-size: 13px;
    line-height: 1.55;
    font-weight: 500;
}

/* =========================================================
   ONAY MODALI
   ========================================================= */

.hs-confirm-modal {
    position: fixed;
    z-index: 1500;
    inset: 0;

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

    padding: 20px;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.18s ease,
        visibility 0.18s ease;
}

.hs-confirm-modal[hidden] {
    display: none !important;
}

.hs-confirm-modal.is-open {
    opacity: 1;
    visibility: visible;
}

.hs-confirm-modal-backdrop {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    border: 0;

    background: rgba(0, 0, 0, 0.68);

    cursor: pointer;
}

.hs-confirm-modal-dialog {
    position: relative;
    z-index: 1;

    width: min(100%, 420px);

    padding: 26px;

    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 24px;

    background: #050505;

    text-align: center;

    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.48);

    transform: translateY(12px) scale(0.98);

    transition: transform 0.18s ease;
}

.hs-confirm-modal.is-open
.hs-confirm-modal-dialog {
    transform: translateY(0) scale(1);
}

.hs-confirm-modal-icon {
    width: 58px;
    height: 58px;

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

    margin: 0 auto 16px;

    border-radius: 50%;
}

.hs-confirm-modal-icon svg {
    width: 29px;
    height: 29px;
}

.hs-confirm-modal.is-danger
.hs-confirm-modal-icon {
    background: rgba(248, 113, 113, 0.13);
    color: #f87171;
}

.hs-confirm-modal.is-success
.hs-confirm-modal-icon {
    background: rgba(35, 197, 94, 0.13);
    color: #23c55e;
}

.hs-confirm-modal-title {
    margin: 0;

    color: #ffffff;

    font-size: 19px;
    line-height: 1.3;
    font-weight: 600;
}

.hs-confirm-modal-description {
    margin: 10px 0 0;

    color: rgba(255, 255, 255, 0.68);

    font-size: 13px;
    line-height: 1.55;
    font-weight: 500;
}

.hs-confirm-modal-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;

    margin-top: 22px;
}

.hs-confirm-modal-cancel,
.hs-confirm-modal-submit {
    min-height: 44px;

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

    padding: 10px 15px;

    border-radius: 13px;

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

    cursor: pointer;

    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        background-color 0.2s ease;
}

.hs-confirm-modal-cancel {
    border: 1px solid rgba(255, 255, 255, 0.2);

    background: transparent;
    color: #ffffff;
}

.hs-confirm-modal-submit {
    border: 1px solid transparent;

    color: #ffffff;
}

.hs-confirm-modal.is-danger
.hs-confirm-modal-submit {
    background: #ef4444;
}

.hs-confirm-modal.is-success
.hs-confirm-modal-submit {
    background: #23a455;
}

.hs-confirm-modal-cancel:hover,
.hs-confirm-modal-submit:hover {
    opacity: 0.9;
}

.hs-confirm-modal-cancel:active,
.hs-confirm-modal-submit:active {
    transform: scale(0.98);
}

.hs-confirm-modal-submit:disabled {
    opacity: 0.65;
    cursor: wait;
}

.hs-confirm-modal-submit
.hs-confirm-modal-spinner {
    width: 18px;
    height: 18px;

    border-color: rgba(255, 255, 255, 0.28);
    border-top-color: #ffffff;
}

@media (max-width: 640px) {
    .hs-other-profile-menu-button {
        width: 34px;
        height: 34px;
    }

    .hs-other-profile-actions {
        display: flex;
    }

    .hs-other-profile-common {
        padding: 13px 14px;
    }

    .hs-confirm-modal-dialog {
        padding: 22px 18px;
        border-radius: 20px;
    }
}

/* =========================================================
   MEKAN SORULARI VE CEVAP DAĞILIMLARI - KOYU
   ========================================================= */

.hs-place-questions {
    width: 100%;
    margin-top: 18px;
}

.hs-place-questions-header {
    width: 100%;

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

    padding: 16px;

    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 22px;

    background: #050505;
    color: #ffffff;

    text-decoration: none;

    box-shadow:
        0 7px 18px rgba(0, 0, 0, 0.32);

    transition:
        border-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.hs-place-questions-header:hover {
    border-color: rgba(255, 255, 255, 0.3);

    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.4);

    transform: translateY(-1px);
}

.hs-place-questions-header:active {
    transform: scale(0.995);
}

.hs-place-questions-header-content {
    min-width: 0;

    display: flex;
    align-items: center;
    gap: 12px;
}

.hs-place-questions-header-icon {
    flex: 0 0 auto;

    width: 42px;
    height: 42px;

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

    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;

    background: rgba(255, 255, 255, 0.07);
    color: #ffffff;
}

.hs-place-questions-header-icon svg {
    width: 22px;
    height: 22px;
}

.hs-place-questions-header-text {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 3px;
}

.hs-place-questions-header-title {
    overflow: hidden;

    color: #ffffff;

    font-size: 13px;
    line-height: 1.35;
    font-weight: 600;

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

.hs-place-questions-header-description {
    overflow: hidden;

    color: rgba(255, 255, 255, 0.58);

    font-size: 10.5px;
    line-height: 1.35;
    font-weight: 600;

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

.hs-place-questions-header-action {
    flex: 0 0 auto;

    display: inline-flex;
    align-items: center;
    gap: 5px;

    color: rgba(255, 255, 255, 0.82);

    font-size: 10.5px;
    font-weight: 600;
}

.hs-place-questions-header-action svg {
    width: 17px;
    height: 17px;
}

.hs-place-questions-loading {
    min-height: 110px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;

    margin-top: 14px;
    padding: 20px;

    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 20px;

    background: #050505;
    color: rgba(255, 255, 255, 0.65);

    font-size: 12px;
    font-weight: 600;
}

.hs-place-questions-loading[hidden],
.hs-place-questions-message[hidden],
.hs-place-questions-list[hidden] {
    display: none !important;
}

.hs-place-questions-spinner {
    width: 20px;
    height: 20px;

    display: inline-block;

    border: 2px solid rgba(255, 255, 255, 0.18);
    border-top-color: #ffffff;
    border-radius: 50%;

    animation:
        hs-place-questions-spinner-animation
        0.75s
        linear
        infinite;
}

@keyframes hs-place-questions-spinner-animation {
    to {
        transform: rotate(360deg);
    }
}

.hs-place-questions-message {
    width: 100%;

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

    margin-top: 14px;
    padding: 16px;

    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 20px;

    background: #050505;
    color: rgba(255, 255, 255, 0.68);

    font-size: 12px;
    line-height: 1.45;
    font-weight: 600;
}

.hs-place-questions-message.is-error {
    border-color: rgba(220, 38, 38, 0.46);
    color: #fca5a5;
}

.hs-place-questions-message-icon {
    flex: 0 0 auto;

    width: 36px;
    height: 36px;

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

    border-radius: 12px;

    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.74);
}

.hs-place-questions-message.is-error
.hs-place-questions-message-icon {
    background: rgba(220, 38, 38, 0.13);
    color: #f87171;
}

.hs-place-questions-message-icon svg {
    width: 19px;
    height: 19px;
}

.hs-place-questions-list {
    display: flex;
    flex-direction: column;
    gap: 12px;

    margin-top: 14px;
}

.hs-place-question-card {
    width: 100%;

    padding: 14px;

    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 20px;

    background: #050505;

    box-shadow:
        0 7px 18px rgba(0, 0, 0, 0.28);
}

.hs-place-question-title {
    display: -webkit-box;
    overflow: hidden;

    margin: 0;

    color: #ffffff;

    font-size: 12.8px;
    line-height: 1.4;
    font-weight: 600;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.hs-place-question-meta {
    margin-top: 7px;

    color: rgba(255, 255, 255, 0.54);

    font-size: 9.8px;
    font-weight: 600;
}

.hs-place-question-bar {
    width: 100%;
    height: 30px;

    display: flex;
    overflow: hidden;

    margin-top: 12px;

    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 9px;

    background: #050505;
}

.hs-place-question-bar-part {
    min-width: 24px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;

    padding: 0 5px;

    font-size: 8px;
    line-height: 1;
    font-weight: 700;

    white-space: nowrap;
}

.hs-place-question-bar-yes {
    background: #16a34a;
    color: #ffffff;
}

.hs-place-question-bar-no {
    background: #dc2626;
    color: #ffffff;
}

.hs-place-question-bar-unknown {
    border-left: 1px solid rgba(0, 0, 0, 0.24);

    background: #ffffff;
    color: #050505;
}

.hs-place-question-bar-label {
    overflow: hidden;

    max-width: 70px;

    text-overflow: ellipsis;
}

.hs-place-question-bar-value {
    font: inherit;
}

.hs-place-question-bar-empty {
    width: 100%;
    height: 28px;

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

    margin-top: 12px;

    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;

    background: #050505;
    color: rgba(255, 255, 255, 0.58);

    font-size: 8.5px;
    font-weight: 600;
}

.hs-place-question-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;

    margin-top: 11px;
}

.hs-place-question-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    color: rgba(255, 255, 255, 0.64);

    font-size: 9px;
    font-weight: 600;
}

.hs-place-question-legend-item strong {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
}

.hs-place-question-legend-dot {
    width: 8px;
    height: 8px;

    display: inline-block;

    border-radius: 50%;
}

.hs-place-question-legend-dot.is-yes {
    background: #16a34a;
}

.hs-place-question-legend-dot.is-no {
    background: #dc2626;
}

.hs-place-question-legend-dot.is-unknown {
    border: 1px solid rgba(255, 255, 255, 0.38);

    background: #ffffff;
}

@media (max-width: 640px) {
    .hs-place-questions-header {
        padding: 14px;
        border-radius: 18px;
    }

    .hs-place-questions-header-icon {
        width: 38px;
        height: 38px;
        border-radius: 12px;
    }

    .hs-place-questions-header-action span {
        display: none;
    }

    .hs-place-question-card {
        padding: 13px;
        border-radius: 18px;
    }

    .hs-place-question-bar {
        height: 28px;
    }

    .hs-place-question-bar-label {
        display: none;
    }
}

/* =========================================================
   MEKAN BİLGİLERİ - KOYU TEMA
   ========================================================= */

.hs-place-info-page {
    width: min(100%, 820px);
    margin: 0 auto;
    padding: 10px 0 120px;
}

.hs-place-info-page-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;

    margin-bottom: 22px;
}

.hs-place-info-back-button {
    flex: 0 0 auto;

    width: 42px;
    height: 42px;

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

    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;

    background: #050505;
    color: #ffffff;

    text-decoration: none;

    transition:
        border-color 0.2s ease,
        background-color 0.2s ease,
        transform 0.2s ease;
}

.hs-place-info-back-button:hover {
    border-color: rgba(255, 255, 255, 0.28);
    background: #0b0b0b;
    transform: translateX(-2px);
}

.hs-place-info-page-title-group {
    min-width: 0;
}

.hs-place-info-page-title {
    margin: 0;

    color: #ffffff;

    font-size: 22px;
    line-height: 1.25;
    font-weight: 600;
}

.hs-place-info-page-description {
    margin: 5px 0 0;

    color: rgba(255, 255, 255, 0.58);

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

.hs-place-info-loading {
    min-height: 240px;

    display: none;
    align-items: center;
    justify-content: center;
    gap: 12px;

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 22px;

    background: #050505;
    color: rgba(255, 255, 255, 0.65);

    font-size: 12px;
    font-weight: 600;
}

.hs-place-info-loading.active {
    display: flex;
}

.hs-place-info-spinner {
    width: 22px;
    height: 22px;

    border: 2px solid rgba(255, 255, 255, 0.16);
    border-top-color: #ffffff;
    border-radius: 50%;

    animation: hs-place-info-spin 0.75s linear infinite;
}

@keyframes hs-place-info-spin {
    to {
        transform: rotate(360deg);
    }
}

.hs-place-info-error {
    display: flex;
    align-items: center;
    gap: 14px;

    padding: 18px;

    border: 1px solid rgba(220, 38, 38, 0.42);
    border-radius: 20px;

    background: #050505;
    color: #fca5a5;
}

.hs-place-info-error[hidden],
.hs-place-info-content[hidden],
.hs-place-info-row[hidden],
.hs-place-info-status[hidden],
.hs-place-info-hours-empty[hidden] {
    display: none !important;
}

.hs-place-info-error-icon {
    flex: 0 0 auto;

    width: 42px;
    height: 42px;

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

    border-radius: 14px;

    background: rgba(220, 38, 38, 0.13);
    color: #f87171;

    font-size: 18px;
}

.hs-place-info-error-content {
    min-width: 0;
    flex: 1;

    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hs-place-info-error-content strong {
    color: #fecaca;
    font-size: 13px;
    font-weight: 600;
}

.hs-place-info-error-content span {
    color: rgba(254, 202, 202, 0.72);
    font-size: 11px;
    line-height: 1.45;
    font-weight: 500;
}

.hs-place-info-retry-button {
    flex: 0 0 auto;

    padding: 9px 13px;

    border: 1px solid rgba(248, 113, 113, 0.45);
    border-radius: 10px;

    background: transparent;
    color: #fca5a5;

    font: inherit;
    font-size: 11px;
    font-weight: 600;

    cursor: pointer;
}

.hs-place-info-content {
    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 24px;

    background: #050505;

    box-shadow:
        0 16px 36px rgba(0, 0, 0, 0.32);
}

.hs-place-info-hero {
    display: flex;
    align-items: flex-start;
    gap: 16px;

    padding: 20px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.hs-place-info-image {
    position: relative;
    flex: 0 0 auto;

    width: 82px;
    height: 82px;

    overflow: hidden;

    border: 2px solid rgba(255, 255, 255, 0.7);
    border-radius: 50%;

    background: #ffffff;
}

.hs-place-info-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hs-place-info-image-placeholder {
    width: 100%;
    height: 100%;

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

    color: #050505;

    font-size: 36px;
}

.hs-place-info-hero-content {
    min-width: 0;
    flex: 1;
}

.hs-place-info-name {
    margin: 0;

    color: #ffffff;

    font-size: 17px;
    line-height: 1.35;
    font-weight: 600;
}

.hs-place-info-address-preview {
    margin: 8px 0 0;

    color: rgba(255, 255, 255, 0.68);

    font-size: 11.5px;
    line-height: 1.5;
    font-weight: 500;
}

.hs-place-info-status {
    width: fit-content;

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

    margin-top: 12px;
    padding: 6px 11px;

    border: 1px solid;
    border-radius: 999px;

    font-size: 10.5px;
    line-height: 1;
    font-weight: 600;
}

.hs-place-info-status.open {
    border-color: #20b26b;
    background: rgba(32, 178, 107, 0.14);
    color: #20b26b;
}

.hs-place-info-status.closed {
    border-color: #f05252;
    background: rgba(240, 82, 82, 0.14);
    color: #f87171;
}

.hs-place-info-status.unknown {
    border-color: rgba(255, 255, 255, 0.26);
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.65);
}

.hs-place-info-details {
    padding: 0 20px;
}

.hs-place-info-row {
    width: 100%;

    display: flex;
    align-items: flex-start;
    gap: 13px;

    padding: 16px 0;

    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.hs-place-info-row-icon {
    flex: 0 0 auto;

    width: 22px;
    height: 22px;

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

    color: rgba(255, 255, 255, 0.42);

    font-size: 18px;
}

.hs-place-info-row-icon.google {
    color: #fbbc04;
}

.hs-place-info-row-content {
    min-width: 0;
    flex: 1;

    display: flex;
    flex-direction: column;
    gap: 6px;
}

.hs-place-info-row-label {
    color: rgba(255, 255, 255, 0.5);

    font-size: 10.5px;
    font-weight: 600;
}

.hs-place-info-row-value {
    color: #ffffff;

    font-size: 13px;
    line-height: 1.5;
    font-weight: 600;
}

.hs-place-info-score-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.hs-place-info-score-badge {
    display: inline-flex;
    align-items: center;

    padding: 6px 10px;

    border-radius: 999px;

    color: #ffffff;

    font-size: 10.5px;
    line-height: 1;
    font-weight: 600;
}

.hs-place-info-score-badge.cok-uygun,
.hs-place-info-score-icon.cok-uygun {
    background: #5fa85a;
    color: #ffffff;
}

.hs-place-info-score-badge.uygun,
.hs-place-info-score-icon.uygun {
    background: #3f5f14;
    color: #ffffff;
}

.hs-place-info-score-badge.pahali,
.hs-place-info-score-icon.pahali {
    background: #c8172d;
    color: #ffffff;
}

.hs-place-info-score-badge.cok-pahali,
.hs-place-info-score-icon.cok-pahali {
    background: #850015;
    color: #ffffff;
}

.hs-place-info-score-badge.belirsiz {
    background: rgba(255, 255, 255, 0.14);
}

.hs-place-info-score-icon {
    border-radius: 7px;
}

.hs-place-info-score-count {
    color: rgba(255, 255, 255, 0.52);

    font-size: 10px;
    font-weight: 600;
}

.hs-place-info-google-value {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
}

.hs-place-info-google-value strong {
    color: #ffffff;

    font-size: 13px;
    font-weight: 600;
}

.hs-place-info-google-value span {
    color: rgba(255, 255, 255, 0.52);

    font-size: 10px;
    font-weight: 600;
}

.hs-place-info-hours {
    padding: 20px;
}

.hs-place-info-hours-header {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 12px;
}

.hs-place-info-hours-header-icon {
    width: 28px;
    height: 28px;

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

    border-radius: 9px;

    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.72);
}

.hs-place-info-hours-header h2 {
    margin: 0;

    color: #ffffff;

    font-size: 13px;
    font-weight: 600;
}

.hs-place-info-hour-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;

    padding: 11px 0;

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.hs-place-info-hour-row:last-child {
    border-bottom: 0;
}

.hs-place-info-hour-day {
    flex: 0 0 108px;

    color: #ffffff;

    font-size: 11.5px;
    font-weight: 600;
}

.hs-place-info-hour-value {
    min-width: 0;
    flex: 1;

    color: rgba(255, 255, 255, 0.7);

    font-size: 11.5px;
    line-height: 1.45;
    font-weight: 600;
}

.hs-place-info-hours-empty {
    padding: 14px 0;

    color: rgba(255, 255, 255, 0.58);

    font-size: 11.5px;
    font-weight: 600;
}

@media (max-width: 640px) {
    .hs-place-info-page {
        padding-top: 2px;
    }

    .hs-place-info-page-title {
        font-size: 19px;
    }

    .hs-place-info-content {
        border-radius: 20px;
    }

    .hs-place-info-hero {
        padding: 16px;
    }

    .hs-place-info-image {
        width: 74px;
        height: 74px;
    }

    .hs-place-info-name {
        font-size: 15px;
    }

    .hs-place-info-details,
    .hs-place-info-hours {
        padding-left: 16px;
        padding-right: 16px;
    }

    .hs-place-info-hour-day {
        flex-basis: 92px;
    }

    .hs-place-info-error {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .hs-place-info-retry-button {
        margin-left: 56px;
    }
}

/* =========================================================
   MEKAN SAYFASI — KOYU TEMA
   ========================================================= */

.hs-mekan-page {
    width: min(100%, 860px);
    margin: 0 auto;
    padding: 4px 0 120px;
}

.hs-mekan-yukleniyor {
    min-height: 280px;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 12px;

    color: rgba(255, 255, 255, 0.62);
    font-size: 12px;
    font-weight: 600;
}

.hs-mekan-yukleniyor.active {
    display: flex;
}

.hs-mekan-spinner {
    width: 24px;
    height: 24px;

    border: 2px solid rgba(255, 255, 255, 0.14);
    border-top-color: #050505;
    border-radius: 50%;

    animation: hs-mekan-spin 0.75s linear infinite;
}

@keyframes hs-mekan-spin {
    to {
        transform: rotate(360deg);
    }
}

.hs-mekan-hata {
    display: flex;
    align-items: center;
    gap: 14px;

    padding: 18px;

    border: 1px solid rgba(239, 68, 68, 0.38);
    border-radius: 20px;

    background: #050505;
    color: #fca5a5;
}

.hs-mekan-hata[hidden],
.hs-mekan-icerik[hidden],
.hs-mekan-tab-panel[hidden] {
    display: none !important;
}

.hs-mekan-hata-icon {
    flex: 0 0 auto;

    width: 42px;
    height: 42px;

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

    border-radius: 50%;

    background: rgba(239, 68, 68, 0.13);
    color: #f87171;
}

.hs-mekan-hata-metin {
    min-width: 0;
    flex: 1;

    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hs-mekan-hata-metin strong {
    color: #fecaca;
    font-size: 13px;
    font-weight: 600;
}

.hs-mekan-hata-metin span {
    color: rgba(254, 202, 202, 0.7);
    font-size: 11px;
    line-height: 1.45;
}

.hs-mekan-tekrar-dene {
    padding: 9px 13px;

    border: 1px solid rgba(248, 113, 113, 0.42);
    border-radius: 11px;

    background: transparent;
    color: #fca5a5;

    font: inherit;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}

.hs-mekan-profil {
    padding: 4px 0 12px;
}

.hs-mekan-profil-ust {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.hs-mekan-gorsel {
    position: relative;
    flex: 0 0 auto;

    width: 74px;
    height: 74px;

    overflow: hidden;

    border: 2px solid #050505;
    border-radius: 50%;

    background: #ffffff;
}

.hs-mekan-gorsel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hs-mekan-gorsel span {
    width: 100%;
    height: 100%;

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

    color: #050505;
    font-size: 38px;
}

.hs-mekan-profil-bilgi {
    min-width: 0;
    flex: 1;
}

.hs-mekan-baslik-satiri {
    display: flex;
    align-items: center;
    gap: 7px;
}

.hs-mekan-baslik {
    min-width: 0;
    flex: 1;

    margin: 0;

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

    color: #ffffff;

    font-size: 16px;
    line-height: 1.35;
    font-weight: 600;
}

.hs-mekan-bilgi-button {
    flex: 0 0 auto;

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

    color: rgba(255, 255, 255, 0.76);
    font-size: 19px;
    text-decoration: none;
}

.hs-mekan-bilgi-button:hover {
    color: #ffffff;
}

.hs-mekan-adres {
    margin: 6px 0 0;

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

    color: rgba(255, 255, 255, 0.7);

    font-size: 11.5px;
    line-height: 1.4;
    font-weight: 500;
}

.hs-mekan-puanlar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;

    margin-top: 8px;
}

.hs-mekan-hesapsepeti-puani {
    display: inline-flex;
    align-items: center;

    padding: 5px 8px;

    border-radius: 999px;

    color: #ffffff;

    font-size: 10px;
    line-height: 1;
    font-weight: 600;
}

.hs-mekan-hesapsepeti-puani.cok-uygun {
    background: #5fa85a;
}

.hs-mekan-hesapsepeti-puani.uygun {
    background: #3f5f14;
}

.hs-mekan-hesapsepeti-puani.pahali {
    background: #c8172d;
}

.hs-mekan-hesapsepeti-puani.cok-pahali {
    background: #850015;
}

.hs-mekan-hesapsepeti-puani.belirsiz {
    background: rgba(255, 255, 255, 0.16);
}

.hs-mekan-google-puani {
    display: inline-flex;
    align-items: center;
    gap: 4px;

    color: #f59e0b;

    font-size: 11.5px;
    font-weight: 600;
}

.hs-mekan-istatistik-satiri {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;

    margin-top: 8px;
}

.hs-mekan-durum {
    display: inline-flex;
    align-items: center;

    padding: 6px 9px;

    border: 1px solid;
    border-radius: 999px;

    font-size: 10px;
    line-height: 1;
    font-weight: 600;
}

.hs-mekan-durum.open {
    border-color: #20b26b;
    background: rgba(32, 178, 107, 0.14);
    color: #20b26b;
}

.hs-mekan-durum.closed {
    border-color: #f87171;
    background: rgba(248, 113, 113, 0.13);
    color: #f87171;
}

.hs-mekan-durum.unknown {
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.6);
}

.hs-mekan-istatistikler {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hs-mekan-istatistik {
    min-width: 50px;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;

    padding: 0;

    border: 0;
    background: transparent;

    color: inherit;
    font: inherit;
    text-decoration: none;
    cursor: pointer;
}

.hs-mekan-istatistik strong {
    color: #ffffff;
    font-size: 16px;
    line-height: 1;
    font-weight: 600;
}

.hs-mekan-istatistik span {
    color: rgba(255, 255, 255, 0.7);
    font-size: 9px;
    font-weight: 600;
}

.hs-mekan-yol-tarifi-alani {
    display: flex;
    justify-content: flex-end;
}

.hs-mekan-yol-tarifi {
    min-height: 34px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    padding: 7px 18px;

    border: 1px solid #ffffff;
    border-radius: 11px;

    color: #ffffff;
    text-decoration: none;

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

    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

.hs-mekan-yol-tarifi:hover {
    background: #ffffff;
    color: #050505;
}

.hs-mekan-islem-butonlari {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;

    margin-top: 12px;
}

.hs-mekan-islem-button {
    min-width: 0;
    min-height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    padding: 8px 10px;

    border: 1px solid #ffffff;
    border-radius: 12px;

    background: transparent;
    color: #ffffff;

    font: inherit;
    font-size: 11.5px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
}

.hs-mekan-islem-button:hover {
    background: #ffffff;
    color: #050505;
}

.hs-mekan-islem-button.takip.active {
    border-color: #20b26b;
    color: #20b26b;
}

.hs-mekan-islem-button.takip.active:hover {
    background: rgba(32, 178, 107, 0.12);
}

.hs-mekan-islem-button:disabled {
    opacity: 0.6;
    cursor: wait;
}

.hs-mekan-tabs {
    margin-top: 4px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.hs-mekan-tabs-scroll {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.hs-mekan-tab {
    position: relative;

    min-width: 0;
    height: 54px;

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

    padding: 6px;

    border: 0;
    background: transparent;

    color: rgba(255, 255, 255, 0.44);

    font: inherit;
    text-decoration: none;
    cursor: pointer;

    transition: color 0.2s ease;
}

.hs-mekan-tab i {
    font-size: 20px;
}

.hs-mekan-tab span {
    max-width: 100%;

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

    font-size: 9.5px;
    font-weight: 600;
}

.hs-mekan-tab::after {
    position: absolute;
    right: 50%;
    bottom: -1px;

    width: 0;
    height: 2px;

    border-radius: 99px;

    background: #ffffff;

    content: "";
    transform: translateX(50%);

    transition: width 0.18s ease;
}

.hs-mekan-tab:hover,
.hs-mekan-tab.active {
    color: #ffffff;
}

.hs-mekan-tab.active::after {
    width: 44px;
}

.hs-mekan-tab-panel {
    padding-top: 12px;
}

.hs-mekan-onay-modal {
    position: fixed;
    z-index: 9999;
    inset: 0;

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

    padding: 20px;

    background: rgba(0, 0, 0, 0.62);
    backdrop-filter: blur(5px);
}

.hs-mekan-onay-modal.open {
    display: flex;
}

.hs-mekan-onay-kutu {
    width: min(100%, 420px);

    padding: 22px;

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;

    background: #050505;

    text-align: center;

    box-shadow:
        0 22px 54px rgba(0, 0, 0, 0.42);
}

.hs-mekan-onay-icon {
    width: 56px;
    height: 56px;

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

    margin: 0 auto 14px;

    border-radius: 50%;

    background: rgba(248, 113, 113, 0.14);
    color: #f87171;

    font-size: 25px;
}

.hs-mekan-onay-kutu h2 {
    margin: 0;

    color: #ffffff;

    font-size: 17px;
    font-weight: 600;
}

.hs-mekan-onay-kutu p {
    margin: 9px 0 0;

    color: rgba(255, 255, 255, 0.7);

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

.hs-mekan-onay-butonlari {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;

    margin-top: 20px;
}

.hs-mekan-onay-butonlari button {
    min-height: 42px;

    border-radius: 14px;

    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.hs-mekan-onay-vazgec {
    border: 1px solid rgba(255, 255, 255, 0.25);

    background: transparent;
    color: #ffffff;
}

.hs-mekan-onay-cik {
    border: 1px solid #f05252;

    background: #f05252;
    color: #ffffff;
}

@media (max-width: 680px) {
    .hs-mekan-page {
        padding-top: 0;
    }

    .hs-mekan-istatistik-satiri {
        grid-template-columns: 1fr auto 1fr;
        gap: 5px;
    }

    .hs-mekan-yol-tarifi {
        padding-right: 12px;
        padding-left: 12px;
    }

    .hs-mekan-islem-button {
        padding-right: 6px;
        padding-left: 6px;
    }

    .hs-mekan-islem-button i {
        display: none;
    }

    .hs-mekan-tabs {
        margin-right: -16px;
        margin-left: -16px;
    }

    .hs-mekan-tabs-scroll {
        display: flex;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        scroll-snap-type: x mandatory;
    }

    .hs-mekan-tabs-scroll::-webkit-scrollbar {
        display: none;
    }

    .hs-mekan-tab {
        flex: 0 0 92px;
        scroll-snap-align: start;
    }
}

@media (max-width: 440px) {
    .hs-mekan-profil-ust {
        gap: 11px;
    }

    .hs-mekan-gorsel {
        width: 66px;
        height: 66px;
    }

    .hs-mekan-baslik {
        font-size: 14.5px;
    }

    .hs-mekan-yol-tarifi span {
        display: none;
    }

    .hs-mekan-yol-tarifi {
        width: 38px;
        padding: 0;
    }

    .hs-mekan-islem-button {
        font-size: 10.5px;
    }
}

/* =========================================================
   MEKAN SORULARI — KOYU TEMA
   ========================================================= */

.hs-place-questions-page {
    width: min(100%, 820px);
    margin: 0 auto;
    padding: 4px 0 120px;
}

.hs-place-questions-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;

    width: 100%;
    padding: 20px;

    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 22px;

    background: #050505;

    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.18);
}

.hs-place-questions-header-text {
    min-width: 0;
    flex: 1;
}

.hs-place-questions-eyebrow {
    display: block;

    margin-bottom: 7px;

    color: rgba(255, 255, 255, 0.56);

    font-size: 10px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hs-place-questions-header h1 {
    margin: 0;

    color: #ffffff;

    font-size: 18px;
    line-height: 1.3;
    font-weight: 600;
}

.hs-place-questions-header p {
    max-width: 600px;

    margin: 8px 0 0;

    color: rgba(255, 255, 255, 0.67);

    font-size: 11.5px;
    line-height: 1.55;
    font-weight: 500;
}

.hs-place-questions-skip {
    flex: 0 0 auto;

    min-width: 140px;
    min-height: 44px;

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

    padding: 10px 20px;

    border-radius: 14px;

    background: #050505;
    color: #ffffff;

    font-size: 13px;
    font-weight: 600;
    text-decoration: none;

    transition:
        background-color 0.2s ease,
        transform 0.2s ease;
}

.hs-place-questions-skip:hover {
    background: #777777;
    transform: translateY(-1px);
}

.hs-place-questions-message {
    margin-top: 16px;
    padding: 13px 15px;

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

    font-size: 12px;
    line-height: 1.45;
    font-weight: 600;
}

.hs-place-questions-message[hidden] {
    display: none !important;
}

.hs-place-questions-message.error {
    border-color: rgba(248, 113, 113, 0.42);
    background: rgba(127, 29, 29, 0.2);
    color: #fca5a5;
}

.hs-place-questions-message.warning {
    border-color: rgba(245, 158, 11, 0.4);
    background: rgba(120, 53, 15, 0.18);
    color: #fcd34d;
}

.hs-place-questions-message.success {
    border-color: rgba(34, 197, 94, 0.38);
    background: rgba(20, 83, 45, 0.18);
    color: #86efac;
}

.hs-place-questions-list {
    display: flex;
    flex-direction: column;
    gap: 12px;

    margin-top: 18px;
}

.hs-place-question-card {
    width: 100%;
    padding: 15px;

    border: 1px solid rgba(102, 102, 102, 0.16);
    border-radius: 20px;

    background: #050505;

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

    animation:
        hs-place-question-show 0.22s ease;
}

.hs-place-question-card.question-hidden {
    display: none;
}

@keyframes hs-place-question-show {
    from {
        opacity: 0;
        transform: translateY(7px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hs-place-question-top {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.hs-place-question-number {
    flex: 0 0 auto;

    width: 25px;
    height: 25px;

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

    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.67);

    font-size: 10px;
    line-height: 1;
    font-weight: 600;
}

.hs-place-question-card h2 {
    min-width: 0;
    flex: 1;

    margin: 2px 0 0;

    color: #ffffff;

    font-size: 13px;
    line-height: 1.45;
    font-weight: 600;
}

.hs-place-question-options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;

    margin-top: 14px;
}

.hs-place-answer-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    min-height: 37px;
    padding: 8px 12px;

    border: 1px solid rgba(102, 102, 102, 0.48);
    border-radius: 999px;

    background: #050505;
    color: #ffffff;

    font: inherit;
    font-size: 11px;
    line-height: 1;
    font-weight: 600;

    cursor: pointer;

    transition:
        background-color 0.16s ease,
        color 0.16s ease,
        border-color 0.16s ease,
        transform 0.16s ease,
        box-shadow 0.16s ease;
}

.hs-place-answer-chip:hover {
    border-color: rgba(255, 255, 255, 0.55);
    transform: translateY(-1px);
}

.hs-place-answer-chip i {
    font-size: 16px;
}

.hs-place-answer-chip.yes.selected {
    border-color: #16a34a;
    background: #16a34a;
    color: #ffffff;

    box-shadow:
        0 5px 14px rgba(22, 163, 74, 0.22);
}

.hs-place-answer-chip.no.selected {
    border-color: #dc2626;
    background: #dc2626;
    color: #ffffff;

    box-shadow:
        0 5px 14px rgba(220, 38, 38, 0.22);
}

.hs-place-answer-chip.unknown.selected {
    border-color: #ffffff;
    background: #ffffff;
    color: #050505;

    box-shadow:
        0 5px 14px rgba(255, 255, 255, 0.12);
}

.hs-place-questions-more-wrapper {
    display: flex;
    justify-content: center;

    padding: 18px 0 2px;
}

.hs-place-questions-more {
    padding: 9px 13px;

    border: 0;
    background: transparent;

    color: #ffffff;

    font: inherit;
    font-size: 12px;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: #ffffff;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 4px;

    cursor: pointer;
}

.hs-place-questions-more:hover {
    color: rgba(255, 255, 255, 0.75);
}

.hs-place-questions-footer {
    position: sticky;
    z-index: 20;
    bottom: 12px;

    display: flex;
    align-items: center;
    gap: 16px;

    margin-top: 22px;
    padding: 12px;

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 19px;

    background: rgba(20, 20, 20, 0.92);

    box-shadow:
        0 12px 34px rgba(0, 0, 0, 0.3);

    backdrop-filter: blur(12px);
}

.hs-place-questions-selection-info {
    min-width: 110px;

    display: flex;
    align-items: baseline;
    gap: 5px;

    padding-left: 4px;
}

.hs-place-questions-selection-info strong {
    color: #ffffff;

    font-size: 16px;
    line-height: 1;
    font-weight: 600;
}

.hs-place-questions-selection-info span {
    color: rgba(255, 255, 255, 0.6);

    font-size: 10px;
    font-weight: 600;
}

.hs-place-questions-save {
    min-width: 0;
    flex: 1;
    min-height: 52px;

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

    border: 0;
    border-radius: 17px;

    background: #050505;
    color: #ffffff;

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

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        transform 0.2s ease;
}

.hs-place-questions-save:hover {
    background: #777777;
    transform: translateY(-1px);
}

.hs-place-questions-save:disabled {
    opacity: 0.6;
    cursor: wait;
    transform: none;
}

.hs-place-questions-save-spinner {
    width: 22px;
    height: 22px;

    border: 2.4px solid rgba(255, 255, 255, 0.26);
    border-top-color: #ffffff;
    border-radius: 50%;

    animation:
        hs-place-questions-spin 0.7s linear infinite;
}

.hs-place-questions-save-spinner[hidden] {
    display: none !important;
}

@keyframes hs-place-questions-spin {
    to {
        transform: rotate(360deg);
    }
}

.hs-place-questions-empty {
    margin-top: 18px;
    padding: 26px 20px;

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;

    background: #050505;

    text-align: center;
}

.hs-place-questions-empty-icon {
    width: 52px;
    height: 52px;

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

    margin: 0 auto 13px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.7);

    font-size: 24px;
}

.hs-place-questions-empty strong {
    display: block;

    color: #ffffff;

    font-size: 13px;
    font-weight: 600;
}

.hs-place-questions-empty p {
    margin: 7px 0 15px;

    color: rgba(255, 255, 255, 0.6);

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

.hs-place-questions-empty a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 38px;
    padding: 8px 15px;

    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 12px;

    color: #ffffff;

    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
}

@media (max-width: 640px) {
    .hs-place-questions-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 16px;

        padding: 18px;
    }

    .hs-place-questions-header h1 {
        font-size: 17px;
    }

    .hs-place-questions-skip {
        align-self: center;
    }

    .hs-place-question-card {
        padding: 14px;
    }

    .hs-place-questions-footer {
        bottom: 8px;
    }
}

@media (max-width: 440px) {
    .hs-place-question-number {
        display: none;
    }

    .hs-place-question-options {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hs-place-answer-chip {
        width: 100%;
    }

    .hs-place-answer-chip.unknown {
        grid-column: 1 / -1;
    }

    .hs-place-questions-footer {
        gap: 9px;
    }

    .hs-place-questions-selection-info {
        min-width: 80px;
        flex-direction: column;
        gap: 3px;
    }
}

/* =========================================================
   MEKAN CEVAPLARI — KOYU TEMA
   ========================================================= */

.hs-place-answers {
    width: 100%;
    padding-bottom: 140px;
}

/* Header */

.hs-place-answers-header {
    width: 100%;

    display: flex;
    align-items: center;
    gap: 13px;

    padding: 16px;

    border: 1px solid rgba(102, 102, 102, 0.65);
    border-radius: 22px;

    background: #050505;
    color: #ffffff;

    text-decoration: none;

    box-shadow:
        0 7px 14px rgba(0, 0, 0, 0.18);

    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}

.hs-place-answers-header:hover {
    transform: translateY(-1px);

    border-color: rgba(255, 255, 255, 0.38);

    box-shadow:
        0 10px 22px rgba(0, 0, 0, 0.24);
}

.hs-place-answers-header-icon {
    flex: 0 0 auto;

    width: 42px;
    height: 42px;

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

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;

    background: rgba(255, 255, 255, 0.07);
    color: #ffffff;

    font-size: 18px;
}

.hs-place-answers-header-content {
    min-width: 0;
    flex: 1;

    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hs-place-answers-header-eyebrow {
    color: rgba(255, 255, 255, 0.48);

    font-size: 9px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hs-place-answers-header-content strong {
    display: block;

    color: #ffffff;

    font-size: 12px;
    line-height: 1.35;
    font-weight: 600;
}

.hs-place-answers-header-content > span:last-child {
    overflow: hidden;

    color: rgba(255, 255, 255, 0.58);

    font-size: 9.8px;
    line-height: 1.4;
    font-weight: 500;

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

.hs-place-answers-header-arrow {
    flex: 0 0 auto;

    width: 30px;
    height: 30px;

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

    border-radius: 10px;

    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.68);

    font-size: 11px;
}

/* Liste */

.hs-place-answers-list {
    display: flex;
    flex-direction: column;
    gap: 12px;

    margin-top: 14px;
}

.hs-place-answers-list[hidden] {
    display: none !important;
}

.hs-place-answer-card {
    width: 100%;
    padding: 14px;

    border: 1px solid rgba(102, 102, 102, 0.65);
    border-radius: 20px;

    background: #050505;

    box-shadow:
        0 7px 14px rgba(0, 0, 0, 0.18);

    animation:
        hs-place-answer-card-in 0.2s ease;
}

@keyframes hs-place-answer-card-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hs-place-answer-question-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.hs-place-answer-question-number {
    flex: 0 0 auto;

    width: 25px;
    height: 25px;

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

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.62);

    font-size: 9px;
    line-height: 1;
    font-weight: 600;
}

.hs-place-answer-question-content {
    min-width: 0;
    flex: 1;
}

.hs-place-answer-question-content h3 {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;

    margin: 1px 0 0;

    color: #ffffff;

    font-size: 12.8px;
    line-height: 1.35;
    font-weight: 600;
}

.hs-place-answer-question-content p {
    margin: 7px 0 0;

    color: rgba(255, 255, 255, 0.56);

    font-size: 9.8px;
    line-height: 1.2;
    font-weight: 600;
}

.hs-place-answer-question-content p strong {
    color: rgba(255, 255, 255, 0.82);
}

/* Yüzde çubuğu */

.hs-place-answer-distribution {
    margin-top: 13px;
}

.hs-place-answer-bar {
    width: 100%;
    height: 30px;

    display: flex;
    overflow: hidden;

    border: 1px solid rgba(102, 102, 102, 0.48);
    border-radius: 8px;

    background: rgba(102, 102, 102, 0.2);
}

.hs-place-answer-segment {
    min-width: 0;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;

    padding: 0 4px;

    overflow: hidden;
    white-space: nowrap;
}

.hs-place-answer-segment.yes {
    background: #16a34a;
    color: #ffffff;
}

.hs-place-answer-segment.no {
    background: #dc2626;
    color: #ffffff;
}

.hs-place-answer-segment.unknown {
    border-left: 1px solid rgba(102, 102, 102, 0.45);
    border-right: 1px solid rgba(102, 102, 102, 0.45);

    background: #ffffff;
    color: #050505;
}

.hs-place-answer-segment-label {
    overflow: hidden;

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

    text-overflow: ellipsis;
}

.hs-place-answer-segment strong {
    flex: 0 0 auto;

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

.hs-place-answer-no-distribution {
    width: 100%;
    height: 28px;

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

    border: 1px solid rgba(102, 102, 102, 0.45);
    border-radius: 8px;

    background: rgba(102, 102, 102, 0.3);
    color: rgba(255, 255, 255, 0.65);

    font-size: 8.5px;
    font-weight: 600;
}

/* Açıklama */

.hs-place-answer-legend {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;

    margin-top: 10px;
}

.hs-place-answer-legend-item {
    min-width: 0;

    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 5px;

    padding: 7px 8px;

    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;

    background: rgba(255, 255, 255, 0.035);
}

.hs-place-answer-legend-dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;
}

.hs-place-answer-legend-dot.yes {
    background: #16a34a;
}

.hs-place-answer-legend-dot.no {
    background: #dc2626;
}

.hs-place-answer-legend-dot.unknown {
    border: 1px solid rgba(102, 102, 102, 0.7);
    background: #ffffff;
}

.hs-place-answer-legend-label {
    overflow: hidden;

    color: rgba(255, 255, 255, 0.7);

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

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

.hs-place-answer-legend-item strong {
    color: #ffffff;

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

.hs-place-answer-legend-item small {
    grid-column: 2 / 4;

    color: rgba(255, 255, 255, 0.42);

    font-size: 7.5px;
    font-weight: 600;
}

/* Loading */

.hs-place-answers-loading {
    min-height: 130px;

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

    padding: 22px;

    color: rgba(255, 255, 255, 0.6);

    font-size: 10px;
    font-weight: 600;
}

.hs-place-answers-loading[hidden] {
    display: none !important;
}

.hs-place-answers-spinner {
    width: 27px;
    height: 27px;

    border: 3px solid rgba(102, 102, 102, 0.35);
    border-top-color: #050505;
    border-radius: 50%;

    animation:
        hs-place-answers-spin 0.7s linear infinite;
}

@keyframes hs-place-answers-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Empty */

.hs-place-answers-empty {
    width: 100%;

    margin-top: 14px;
    padding: 24px 18px;

    border: 1px solid rgba(102, 102, 102, 0.65);
    border-radius: 20px;

    background: #050505;

    text-align: center;
}

.hs-place-answers-empty[hidden] {
    display: none !important;
}

.hs-place-answers-empty-icon {
    width: 48px;
    height: 48px;

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

    margin: 0 auto 12px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.7);

    font-size: 20px;
}

.hs-place-answers-empty strong {
    display: block;

    color: rgba(255, 255, 255, 0.86);

    font-size: 12px;
    line-height: 1.4;
    font-weight: 600;
}

.hs-place-answers-empty p {
    max-width: 470px;

    margin: 7px auto 15px;

    color: rgba(255, 255, 255, 0.55);

    font-size: 9.8px;
    line-height: 1.5;
    font-weight: 500;
}

.hs-place-answers-empty a {
    min-height: 39px;

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

    padding: 8px 16px;

    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;

    background: #050505;
    color: #ffffff;

    font-size: 10px;
    font-weight: 600;
    text-decoration: none;
}

/* Error */

.hs-place-answers-error {
    display: flex;
    align-items: center;
    gap: 11px;

    margin-top: 14px;
    padding: 14px;

    border: 1px solid rgba(220, 38, 38, 0.4);
    border-radius: 16px;

    background: rgba(127, 29, 29, 0.15);
}

.hs-place-answers-error[hidden] {
    display: none !important;
}

.hs-place-answers-error-icon {
    flex: 0 0 auto;

    color: #f87171;

    font-size: 19px;
}

.hs-place-answers-error-content {
    min-width: 0;
    flex: 1;

    display: flex;
    flex-direction: column;
    gap: 3px;
}

.hs-place-answers-error-content strong {
    color: #fca5a5;

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

.hs-place-answers-error-content span {
    color: rgba(252, 165, 165, 0.72);

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

.hs-place-answers-retry {
    flex: 0 0 auto;

    padding: 8px 11px;

    border: 1px solid rgba(248, 113, 113, 0.45);
    border-radius: 10px;

    background: transparent;
    color: #fca5a5;

    font: inherit;
    font-size: 9px;
    font-weight: 600;

    cursor: pointer;
}

@media (max-width: 620px) {
    .hs-place-answers-header-content > span:last-child {
        white-space: normal;
    }

    .hs-place-answer-legend {
        grid-template-columns: 1fr;
    }

    .hs-place-answer-legend-item small {
        grid-column: auto;
    }
}

@media (max-width: 440px) {
    .hs-place-answers-header {
        padding: 14px;
    }

    .hs-place-answers-header-icon {
        width: 38px;
        height: 38px;

        font-size: 16px;
    }

    .hs-place-answers-header-arrow {
        display: none;
    }

    .hs-place-answer-card {
        padding: 13px;
    }

    .hs-place-answer-question-number {
        display: none;
    }

    .hs-place-answer-segment-label {
        display: none;
    }

    .hs-place-answer-segment strong {
        font-size: 7.5px;
    }

    .hs-place-answers-error {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .hs-place-answers-retry {
        margin-left: 30px;
    }
}

/* =========================================================
   PROFİL AYARLARI — TEMA SWITCH — KOYU
   ========================================================= */

.hs-profile-theme-item {
    width: 100%;

    border: 0;

    font: inherit;
    text-align: left;

    cursor: pointer;
}

.hs-profile-theme-item:hover {
    color: var(--text);
    background: var(--surface-hover);
    transform: translateX(2px);
}

.hs-profile-theme-item:disabled {
    cursor: wait;
    opacity: 0.72;
    transform: none;
}

.hs-profile-theme-icon {
    width: 31px;
    height: 31px;

    display: grid;
    place-items: center;

    flex: 0 0 31px;

    border-radius: 10px;

    background: rgba(255, 153, 0, 0.11);
    color: var(--orange);

    font-size: 13px;
}

.hs-profile-theme-label {
    min-width: 0;
    flex: 1;

    color: var(--text-muted);

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

    transition:
        color 0.2s ease;
}

.hs-profile-theme-item:hover
.hs-profile-theme-label {
    color: var(--text);
}

.hs-profile-theme-switch {
    position: relative;

    width: 42px;
    height: 23px;

    flex: 0 0 42px;

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

    padding: 3px;

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;

    background: rgba(255, 255, 255, 0.1);

    box-shadow:
        inset 0 1px 3px rgba(0, 0, 0, 0.22);

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.hs-profile-theme-switch-knob {
    width: 15px;
    height: 15px;

    display: block;

    border-radius: 50%;

    background: #a9a9a9;

    box-shadow:
        0 2px 5px rgba(0, 0, 0, 0.35);

    transform: translateX(0);

    transition:
        transform 0.22s ease,
        background-color 0.22s ease,
        box-shadow 0.22s ease;
}

.hs-profile-theme-switch.is-active {
    border-color: rgba(255, 153, 0, 0.55);

    background: var(--orange);

    box-shadow:
        0 0 0 3px rgba(255, 153, 0, 0.1),
        inset 0 1px 2px rgba(0, 0, 0, 0.14);
}

.hs-profile-theme-switch.is-active
.hs-profile-theme-switch-knob {
    background: #171717;

    transform: translateX(19px);

    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.42);
}

.hs-profile-theme-item:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 2px;
}

.hs-profile-theme-item.is-loading
.hs-profile-theme-switch-knob {
    animation:
        hs-profile-theme-loading 0.7s ease-in-out infinite alternate;
}

@keyframes hs-profile-theme-loading {
    from {
        opacity: 0.45;
    }

    to {
        opacity: 1;
    }
}

/* =========================================================
   BİLDİRİMLER SAYFASI - KOYU TEMA
   ========================================================= */

.bildirimler-sayfasi {
    width: min(760px, 100%);
    margin: 0 auto;
    padding-bottom: 110px;
}

.bildirimler-listesi {
    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 16px;

    background: #050505;

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.16);
}

.bildirim-karti {
    position: relative;

    display: flex;
    align-items: flex-start;
    gap: 13px;

    width: 100%;
    min-height: 78px;

    padding: 14px 16px;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.08);

    background: #050505;
    color: rgba(255, 255, 255, 0.92);

    cursor: pointer;

    transition:
        background-color 0.18s ease,
        transform 0.18s ease;
}

.bildirim-karti:last-child {
    border-bottom: 0;
}

.bildirim-karti:hover {
    background: #383838;
}

.bildirim-karti:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.42);
    outline-offset: -2px;
}

.bildirim-karti.okunmadi {
    background: #050505;
}

.bildirim-karti.okunmadi:hover {
    background: #707070;
}

.bildirim-avatar {
    position: relative;
    flex: 0 0 46px;

    display: grid;
    place-items: center;

    width: 46px;
    height: 46px;

    overflow: hidden;

    border:
        1px solid rgba(255, 255, 255, 0.14);

    border-radius: 50%;

    background: #474747;
}

.bildirim-avatar img,
.bildirim-modal-kisi-avatar img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.bildirim-avatar-harf {
    display: grid;
    place-items: center;

    width: 100%;
    height: 100%;

    color: #ffffff;

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

.bildirim-karti-icerik {
    flex: 1;
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 5px;

    padding-top: 2px;
}

.bildirim-metin {
    color: rgba(255, 255, 255, 0.91);

    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.48;

    overflow-wrap: anywhere;
}

.bildirim-kullanici-link,
.bildirim-mekan-link {
    color: #ffffff;

    font-weight: 600;
    text-decoration: underline;
    text-decoration-color:
        rgba(255, 255, 255, 0.62);
    text-underline-offset: 2px;
}

.bildirim-kullanici-link:hover,
.bildirim-mekan-link:hover {
    text-decoration-color: #ffffff;
}

.bildirim-diger-kisiler {
    display: inline;

    margin: 0;
    padding: 0;

    border: 0;
    background: transparent;

    color: #ffffff;

    font: inherit;
    font-weight: 600;

    text-decoration: underline;
    text-decoration-color:
        rgba(255, 255, 255, 0.62);
    text-underline-offset: 2px;

    cursor: pointer;
}

.bildirim-diger-kisiler:hover {
    text-decoration-color: #ffffff;
}

.bildirim-zaman {
    color: rgba(255, 255, 255, 0.50);

    font-size: 10.5px;
    font-weight: 500;
    line-height: 1.3;
}

.bildirim-karti.okunmadi .bildirim-zaman {
    color: rgba(255, 255, 255, 0.72);
}

.bildirim-okunmadi-nokta {
    flex: 0 0 8px;

    width: 8px;
    height: 8px;

    margin-top: 8px;

    border-radius: 50%;

    background: #ffffff;

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

.bildirim-karti-ok {
    align-self: center;

    color: rgba(255, 255, 255, 0.32);

    font-size: 11px;
}

.bildirim-karti:hover .bildirim-karti-ok {
    color: rgba(255, 255, 255, 0.72);
}

.bildirimler-yukleniyor {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    padding: 24px;

    color: rgba(255, 255, 255, 0.62);

    font-size: 12px;
    font-weight: 600;
}

.bildirimler-spinner {
    width: 20px;
    height: 20px;

    border: 2px solid rgba(255, 255, 255, 0.16);
    border-top-color: rgba(255, 255, 255, 0.76);
    border-radius: 50%;

    animation:
        bildirimSpinnerDon 0.75s linear infinite;
}

@keyframes bildirimSpinnerDon {
    to {
        transform: rotate(360deg);
    }
}

.bildirimler-bos,
.bildirimler-hata {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;

    min-height: 270px;
    padding: 32px 20px;

    border:
        1px solid rgba(255, 255, 255, 0.10);

    border-radius: 16px;

    background: #050505;

    color: rgba(255, 255, 255, 0.60);

    text-align: center;
}

.bildirimler-bos[hidden],
.bildirimler-hata[hidden],
.bildirimler-yukleniyor[hidden] {
    display: none;
}

.bildirimler-bos strong,
.bildirimler-hata strong {
    color: rgba(255, 255, 255, 0.88);

    font-size: 14px;
}

.bildirimler-bos > span:last-child {
    font-size: 12px;
}

.bildirimler-bos-ikon,
.bildirimler-hata-ikon {
    display: grid;
    place-items: center;

    width: 48px;
    height: 48px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.08);

    color: rgba(255, 255, 255, 0.80);

    font-size: 20px;
}

.bildirimler-tekrar-button {
    min-height: 38px;
    margin-top: 6px;
    padding: 0 18px;

    border:
        1px solid rgba(255, 255, 255, 0.16);

    border-radius: 10px;

    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;

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

    cursor: pointer;
}

.bildirimler-tekrar-button:hover {
    background: rgba(255, 255, 255, 0.14);
}

/* MODAL */

.bildirim-kisiler-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;

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

    padding: 20px;

    background: rgba(0, 0, 0, 0.68);

    backdrop-filter: blur(4px);
}

.bildirim-kisiler-modal.acik {
    display: flex;
}

.bildirim-kisiler-modal-dialog {
    width: min(480px, 100%);
    max-height: min(680px, 88vh);

    overflow: hidden;

    border:
        1px solid rgba(255, 255, 255, 0.12);

    border-radius: 18px;

    background: #050505;

    box-shadow:
        0 30px 90px rgba(0, 0, 0, 0.46);
}

.bildirim-kisiler-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;

    padding: 19px 20px;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.09);
}

.bildirim-kisiler-modal-header h2 {
    margin: 0 0 5px;

    color: #ffffff;

    font-size: 17px;
    font-weight: 600;
}

.bildirim-kisiler-modal-header p {
    margin: 0;

    color: rgba(255, 255, 255, 0.52);

    font-size: 11.5px;
    line-height: 1.45;
}

.bildirim-kisiler-modal-kapat {
    flex: 0 0 36px;

    display: grid;
    place-items: center;

    width: 36px;
    height: 36px;

    border:
        1px solid rgba(255, 255, 255, 0.10);

    border-radius: 10px;

    background: #050505;
    color: rgba(255, 255, 255, 0.80);

    cursor: pointer;
}

.bildirim-kisiler-modal-kapat:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

.bildirim-kisiler-modal-liste {
    max-height: calc(88vh - 105px);

    overflow-y: auto;
}

.bildirim-modal-kisi {
    display: flex;
    align-items: center;
    gap: 12px;

    min-height: 68px;
    padding: 11px 16px;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.07);

    color: inherit;
    text-decoration: none;

    transition:
        background-color 0.18s ease;
}

.bildirim-modal-kisi:last-child {
    border-bottom: 0;
}

.bildirim-modal-kisi:hover {
    background: rgba(255, 255, 255, 0.06);
}

.bildirim-modal-kisi-avatar {
    flex: 0 0 44px;

    display: grid;
    place-items: center;

    width: 44px;
    height: 44px;

    overflow: hidden;

    border:
        1px solid rgba(255, 255, 255, 0.12);

    border-radius: 50%;

    background: #050505;
}

.bildirim-modal-kisi-bilgi {
    flex: 1;
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 3px;
}

.bildirim-modal-kisi-bilgi strong {
    overflow: hidden;

    color: #ffffff;

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

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

.bildirim-modal-kisi-bilgi span {
    overflow: hidden;

    color: rgba(255, 255, 255, 0.50);

    font-size: 11px;

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

.bildirim-modal-kisi-ok {
    color: rgba(255, 255, 255, 0.28);

    font-size: 11px;
}

/* TOAST */

.bildirim-toast-alani {
    position: fixed;
    top: 84px;
    right: 20px;
    z-index: 10020;

    display: flex;
    flex-direction: column;
    gap: 10px;

    pointer-events: none;
}

.bildirim-toast {
    display: flex;
    align-items: center;
    gap: 10px;

    min-width: 260px;
    max-width: 390px;
    padding: 13px 15px;

    border:
        1px solid rgba(255, 255, 255, 0.12);

    border-radius: 12px;

    background: #050505;
    color: #ffffff;

    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.28);

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

    opacity: 0;
    transform: translateY(-8px);

    transition:
        opacity 0.22s ease,
        transform 0.22s ease;
}

.bildirim-toast.goster {
    opacity: 1;
    transform: translateY(0);
}

.bildirim-toast.error {
    border-color:
        rgba(239, 68, 68, 0.40);
}

@media (max-width: 640px) {
    .bildirimler-sayfasi {
        width: 100%;
        padding-bottom: 90px;
    }

    .bildirimler-listesi {
        border-radius: 12px;
    }

    .bildirim-karti {
        gap: 11px;
        padding: 13px 12px;
    }

    .bildirim-avatar {
        flex-basis: 42px;

        width: 42px;
        height: 42px;
    }

    .bildirim-metin {
        font-size: 12px;
    }

    .bildirim-karti-ok {
        display: none;
    }

    .bildirim-kisiler-modal {
        align-items: flex-end;

        padding: 0;
    }

    .bildirim-kisiler-modal-dialog {
        width: 100%;
        max-height: 86vh;

        border-radius: 18px 18px 0 0;
    }

    .bildirim-toast-alani {
        right: 12px;
        left: 12px;
    }

    .bildirim-toast {
        width: 100%;
        min-width: 0;
        max-width: none;
    }
}

/* =========================================================
   İÇERİK KONUM SEÇİCİ - KOYU TEMA
   Bütün yüzeyler #050505
   ========================================================= */

body.konum-secici-modal-acik {
    overflow: hidden;
}

.konum-secici {
    width: 100%;
}

.konum-secici-button {
    width: 100%;
    min-height: 66px;

    display: flex;
    align-items: center;
    gap: 11px;

    padding: 12px 13px;

    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 20px;

    background: #050505;
    color: #ffffff;

    text-align: left;

    transition:
        border-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.konum-secici-button:hover {
    border-color: rgba(255, 153, 0, 0.38);

    box-shadow:
        0 14px 34px rgba(0, 0, 0, 0.32);

    transform: translateY(-1px);
}

.konum-secici-button:active {
    transform: translateY(0);
}

.konum-secici-button:focus-visible {
    outline: 2px solid #ff9900;
    outline-offset: 3px;
}

.konum-secici-button.secildi {
    border-color: rgba(255, 153, 0, 0.23);
}

.konum-secici-ikon {
    width: 36px;
    height: 36px;

    display: grid;
    place-items: center;

    flex: 0 0 36px;

    border-radius: 50%;

    background: rgba(255, 153, 0, 0.16);
    color: #ff9900;

    font-size: 17px;
}

.konum-secici-bilgi {
    min-width: 0;
    flex: 1;

    display: flex;
    flex-direction: column;
    gap: 5px;
}

.konum-secici-baslik {
    overflow: hidden;
    text-overflow: ellipsis;

    color: #ffffff;

    font-size: 12.5px;
    line-height: 1.2;
    font-weight: 600;
}

.konum-secici-aciklama {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    color: rgba(255, 255, 255, 0.54);

    font-size: 10.5px;
    line-height: 1.25;
    font-weight: 500;
}

.konum-secici-ok {
    width: 25px;
    height: 25px;

    display: grid;
    place-items: center;

    flex: 0 0 25px;

    color: rgba(255, 255, 255, 0.56);

    font-size: 13px;
}

.konum-secici-yukleniyor {
    width: 24px;
    height: 24px;

    display: grid;
    place-items: center;

    flex: 0 0 24px;
}

.konum-secici-spinner {
    width: 15px;
    height: 15px;

    display: block;

    border: 2px solid rgba(255, 255, 255, 0.13);
    border-top-color: #ff9900;
    border-radius: 50%;

    animation:
        konum-secici-don 0.7s linear infinite;
}

.konum-secici-spinner.buyuk {
    width: 25px;
    height: 25px;

    border-width: 2.5px;
}

@keyframes konum-secici-don {
    to {
        transform: rotate(360deg);
    }
}

/* MODAL */

.konum-secici-modal {
    position: fixed;
    inset: 0;
    z-index: 4000;

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

    padding: 18px;

    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(8px);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.22s ease,
        visibility 0.22s ease;
}

.konum-secici-modal.acik {
    opacity: 1;
    visibility: visible;
}

.konum-secici-modal-dialog {
    width: min(680px, 100%);
    height: min(72vh, 680px);

    display: flex;
    flex-direction: column;

    padding: 0 14px 15px;

    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 27px;

    background: #050505;

    box-shadow:
        0 30px 90px rgba(0, 0, 0, 0.72);

    transform: translateY(35px) scale(0.985);

    transition:
        transform 0.24s ease;
}

.konum-secici-modal.acik
.konum-secici-modal-dialog {
    transform: translateY(0) scale(1);
}

.konum-secici-modal-tutamac {
    width: 42px;
    height: 4px;

    flex: 0 0 4px;

    margin: 9px auto 12px;

    border-radius: 999px;

    background: rgba(255, 255, 255, 0.18);
}

.konum-secici-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;

    padding-bottom: 13px;
}

.konum-secici-modal-header h2 {
    margin: 0;

    color: #ffffff;

    font-size: 15px;
    line-height: 1.2;
    font-weight: 600;
}

.konum-secici-modal-header p {
    margin: 5px 0 0;

    color: rgba(255, 255, 255, 0.48);

    font-size: 10.5px;
    line-height: 1.4;
    font-weight: 500;
}

.konum-secici-modal-kapat {
    width: 32px;
    height: 32px;

    display: grid;
    place-items: center;

    flex: 0 0 32px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;

    background: #050505;
    color: rgba(255, 255, 255, 0.78);

    font-size: 14px;

    transition:
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.konum-secici-modal-kapat:hover {
    border-color: rgba(255, 153, 0, 0.35);
    color: #ff9900;

    transform: rotate(4deg);
}

/* ARAMA */

.konum-secici-arama-alani {
    position: relative;

    min-height: 46px;

    display: flex;
    align-items: center;

    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 17px;

    background: #050505;
}

.konum-secici-arama-alani:focus-within {
    border-color: rgba(255, 153, 0, 0.62);

    box-shadow:
        0 0 0 3px rgba(255, 153, 0, 0.08);
}

.konum-secici-arama-ikon {
    width: 43px;

    display: grid;
    place-items: center;

    flex: 0 0 43px;

    color: rgba(255, 255, 255, 0.52);

    font-size: 15px;
}

.konum-secici-arama-input {
    min-width: 0;
    height: 44px;
    flex: 1;

    padding: 0;

    border: 0;
    outline: 0;

    background: transparent;
    color: #ffffff;

    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
}

.konum-secici-arama-input::placeholder {
    color: rgba(255, 255, 255, 0.40);
    font-weight: 500;
}

.konum-secici-arama-temizle {
    width: 35px;
    height: 35px;

    display: grid;
    place-items: center;

    flex: 0 0 35px;

    margin-right: 5px;

    border: 0;
    border-radius: 50%;

    background: #050505;
    color: rgba(255, 255, 255, 0.54);

    font-size: 12px;
}

.konum-secici-arama-temizle:hover {
    color: #ff9900;
}

/* SONUÇLAR */

.konum-secici-sonuc-listesi {
    min-height: 0;
    flex: 1;

    display: flex;
    flex-direction: column;
    gap: 8px;

    margin-top: 12px;
    padding-right: 3px;

    overflow-y: auto;
    overscroll-behavior: contain;

    scrollbar-width: thin;
    scrollbar-color:
        rgba(255, 255, 255, 0.18)
        transparent;
}

.konum-secici-sonuc {
    width: 100%;

    display: flex;
    align-items: center;
    gap: 10px;

    padding: 11px;

    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 17px;

    background: #050505;
    color: #ffffff;

    text-align: left;

    transition:
        border-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.konum-secici-sonuc:hover,
.konum-secici-sonuc.secili {
    border-color: rgba(255, 153, 0, 0.35);

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.28);

    transform: translateY(-1px);
}

.konum-secici-sonuc-ikon {
    width: 35px;
    height: 35px;

    display: grid;
    place-items: center;

    flex: 0 0 35px;

    border-radius: 50%;

    background: rgba(255, 153, 0, 0.14);
    color: #ff9900;

    font-size: 16px;
}

.konum-secici-sonuc-bilgi {
    min-width: 0;
    flex: 1;

    display: flex;
    flex-direction: column;
    gap: 4px;
}

.konum-secici-sonuc-bilgi strong {
    overflow: hidden;
    text-overflow: ellipsis;

    color: #ffffff;

    font-size: 12px;
    line-height: 1.2;
    font-weight: 600;
}

.konum-secici-sonuc-bilgi span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    color: rgba(255, 255, 255, 0.51);

    font-size: 10px;
    line-height: 1.3;
    font-weight: 500;
}

.konum-secici-sonuc-kategori {
    flex: 0 0 auto;

    padding: 5px 8px;

    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 999px;

    background: #050505;
    color: rgba(255, 255, 255, 0.66);

    font-size: 8.5px;
    line-height: 1;
    font-weight: 600;
}

.konum-secici-sonuc-ok {
    width: 18px;

    flex: 0 0 18px;

    color: rgba(255, 255, 255, 0.40);

    font-size: 10px;
}

/* DURUMLAR */

.konum-secici-modal-yukleniyor,
.konum-secici-bos,
.konum-secici-hata {
    min-height: 220px;
    flex: 1;

    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;

    text-align: center;
}

.konum-secici-modal-yukleniyor:not([hidden]),
.konum-secici-bos:not([hidden]),
.konum-secici-hata:not([hidden]) {
    display: flex;
}

.konum-secici-modal-yukleniyor {
    color: rgba(255, 255, 255, 0.55);

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

.konum-secici-bos-ikon,
.konum-secici-hata-ikon {
    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: #050505;

    font-size: 19px;
}

.konum-secici-bos-ikon {
    color: #ff9900;

    border: 1px solid rgba(255, 153, 0, 0.20);
}

.konum-secici-hata-ikon {
    color: #e54857;

    border: 1px solid rgba(229, 72, 87, 0.20);
}

.konum-secici-bos strong,
.konum-secici-hata strong {
    color: #ffffff;

    font-size: 12px;
    font-weight: 600;
}

.konum-secici-bos > span:last-child,
.konum-secici-hata > span {
    color: rgba(255, 255, 255, 0.48);

    font-size: 10.5px;
    font-weight: 500;
}

.konum-secici-hata button {
    min-height: 35px;

    margin-top: 4px;
    padding: 0 14px;

    border: 1px solid rgba(255, 153, 0, 0.30);
    border-radius: 12px;

    background: #050505;
    color: #ff9900;

    font-size: 10.5px;
    font-weight: 600;
}

@media (max-width: 620px) {
    .konum-secici-modal {
        padding:
            0
            10px
            max(10px, env(safe-area-inset-bottom));
    }

    .konum-secici-modal-dialog {
        width: 100%;
        height: min(76vh, 690px);

        border-radius: 27px 27px 20px 20px;
    }

    .konum-secici-sonuc-kategori {
        display: none;
    }
}

/* =========================================================
   İÇERİK RESİM SEÇİCİ - KOYU TEMA
   Bütün ana yüzeyler #050505
   ========================================================= */

body.icerik-resim-modal-acik {
    overflow: hidden;
}

.icerik-resim-secici {
    width: 100%;
}

.icerik-resim-secici-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;

    margin-bottom: 12px;
}

.icerik-resim-secici-baslik {
    min-width: 0;

    display: flex;
    align-items: center;
    gap: 9px;

    color: #ffffff;

    font-size: 16px;
    line-height: 1.2;
    font-weight: 600;
}

.icerik-resim-secici-baslik-ikon {
    width: 30px;
    height: 30px;

    display: grid;
    place-items: center;

    border-radius: 10px;

    background: rgba(255, 153, 0, 0.14);
    color: #ff9900;

    font-size: 14px;
}

.icerik-resim-secici-sayac {
    color: rgba(255, 255, 255, 0.64);

    font-size: 12px;
    font-weight: 600;
}

/* AI DURUMU */

.icerik-resim-ai-durum {
    min-height: 46px;

    display: flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 12px;
    padding: 11px 13px;

    border: 1px solid rgba(255, 153, 0, 0.22);
    border-radius: 16px;

    background: #050505;
    color: #ffffff;

    font-size: 12px;
    font-weight: 600;
}

.icerik-resim-ai-durum[hidden] {
    display: none;
}

.icerik-resim-spinner {
    width: 18px;
    height: 18px;

    flex: 0 0 18px;

    border: 2px solid rgba(255, 255, 255, 0.14);
    border-top-color: #ff9900;
    border-radius: 50%;

    animation:
        icerik-resim-don 0.7s linear infinite;
}

@keyframes icerik-resim-don {
    to {
        transform: rotate(360deg);
    }
}

/* YATAY RESİM LİSTESİ */

.icerik-resim-kaydirma {
    display: flex;
    align-items: stretch;
    gap: 12px;

    min-width: 0;
    width: 100%;

    overflow-x: auto;
    overscroll-behavior-x: contain;

    padding: 2px 2px 8px;

    scrollbar-width: thin;
    scrollbar-color:
        rgba(255, 255, 255, 0.18)
        transparent;
}

.icerik-resim-kaydirma::-webkit-scrollbar {
    height: 6px;
}

.icerik-resim-kaydirma::-webkit-scrollbar-track {
    background: transparent;
}

.icerik-resim-kaydirma::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
}

.icerik-resim-listesi {
    display: flex;
    align-items: stretch;
    gap: 12px;
}

/* EKLE KARTI */

.icerik-resim-ekle-karti {
    width: 118px;
    height: 168px;

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

    flex: 0 0 118px;

    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 20px;

    background: #050505;
    color: #ffffff;

    transition:
        border-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.icerik-resim-ekle-karti:hover {
    border-color: rgba(255, 153, 0, 0.48);

    box-shadow:
        0 14px 34px rgba(0, 0, 0, 0.38);

    transform: translateY(-2px);
}

.icerik-resim-ekle-karti:disabled {
    cursor: wait;
    opacity: 0.55;
}

.icerik-resim-ekle-ikon {
    width: 46px;
    height: 46px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: rgba(255, 153, 0, 0.18);
    color: #ff9900;

    font-size: 25px;
}

.icerik-resim-ekle-karti strong {
    font-size: 12px;
    font-weight: 600;
}

/* RESİM KARTI */

.icerik-resim-karti {
    position: relative;

    width: 132px;
    height: 168px;

    flex: 0 0 132px;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;

    background: #050505;

    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.28);
}

.icerik-resim-karti > img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}

.icerik-resim-karti::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.36),
            transparent 34%,
            transparent 62%,
            rgba(0, 0, 0, 0.55)
        );
}

.icerik-resim-tip-etiketi {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;

    min-height: 25px;

    padding: 0 9px;

    border: 0;
    border-radius: 999px;

    color: #ffffff;

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

    box-shadow:
        0 5px 14px rgba(0, 0, 0, 0.24);
}

.icerik-resim-tip-etiketi.fis {
    background: #ff9900;
}

.icerik-resim-tip-etiketi.menu {
    background: #3478f6;
}

.icerik-resim-tip-etiketi.genel {
    background: rgba(5, 5, 5, 0.76);
    backdrop-filter: blur(8px);
}

.icerik-resim-sil {
    position: absolute;
    top: 7px;
    right: 7px;
    z-index: 2;

    width: 29px;
    height: 29px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 50%;

    background: rgba(5, 5, 5, 0.78);
    color: #ffffff;

    backdrop-filter: blur(8px);

    font-size: 14px;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.icerik-resim-sil:hover {
    background: #dc3545;
    transform: scale(1.05);
}

.icerik-resim-siralama {
    position: absolute;
    right: 8px;
    bottom: 8px;
    left: 8px;
    z-index: 2;

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

.icerik-resim-siralama button,
.icerik-resim-siralama span {
    width: 30px;
    height: 30px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 50%;

    background: rgba(5, 5, 5, 0.72);
    color: #ffffff;

    backdrop-filter: blur(8px);

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

.icerik-resim-siralama button {
    transition:
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.icerik-resim-siralama button:hover:not(:disabled) {
    border-color: rgba(255, 153, 0, 0.42);
    color: #ff9900;
    transform: scale(1.05);
}

.icerik-resim-siralama button:disabled {
    cursor: default;
    opacity: 0.30;
}

.icerik-resim-secici-not {
    margin: 8px 0 0;

    color: rgba(255, 255, 255, 0.55);

    font-size: 11px;
    line-height: 1.45;
    font-weight: 500;
}

/* BOTTOM SHEET */

.icerik-resim-sheet {
    position: fixed;
    inset: 0;
    z-index: 5000;

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

    padding:
        18px
        16px
        max(18px, env(safe-area-inset-bottom));

    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(8px);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.22s ease,
        visibility 0.22s ease;
}

.icerik-resim-sheet.acik {
    opacity: 1;
    visibility: visible;
}

.icerik-resim-sheet-dialog {
    width: min(560px, 100%);

    padding: 0 16px 16px;

    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 24px;

    background: #050505;

    box-shadow:
        0 30px 90px rgba(0, 0, 0, 0.72);

    transform: translateY(30px);

    transition:
        transform 0.24s ease;
}

.icerik-resim-sheet.acik
.icerik-resim-sheet-dialog {
    transform: translateY(0);
}

.icerik-resim-sheet-tutamac {
    width: 42px;
    height: 4px;

    margin: 9px auto 13px;

    border-radius: 999px;

    background: rgba(255, 255, 255, 0.18);
}

.icerik-resim-sheet-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;

    margin-bottom: 13px;
}

.icerik-resim-sheet-header h2 {
    margin: 0;

    color: #ffffff;

    font-size: 15px;
    font-weight: 600;
}

.icerik-resim-sheet-header p {
    margin: 5px 0 0;

    color: rgba(255, 255, 255, 0.48);

    font-size: 10.5px;
    line-height: 1.4;
    font-weight: 500;
}

.icerik-resim-sheet-kapat {
    width: 32px;
    height: 32px;

    display: grid;
    place-items: center;

    flex: 0 0 32px;

    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 50%;

    background: #050505;
    color: rgba(255, 255, 255, 0.75);

    font-size: 14px;
}

.icerik-resim-sheet-kapat:hover {
    border-color: rgba(255, 153, 0, 0.36);
    color: #ff9900;
}

/* EKLEME SEÇENEKLERİ */

.icerik-resim-secenek,
.icerik-resim-tip-secenek {
    width: 100%;
    min-height: 56px;

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

    padding: 10px 13px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 17px;

    background: #050505;
    color: #ffffff;

    text-align: left;

    transition:
        border-color 0.2s ease,
        transform 0.2s ease;
}

.icerik-resim-secenek +
.icerik-resim-secenek,
.icerik-resim-tip-secenek +
.icerik-resim-tip-secenek {
    margin-top: 9px;
}

.icerik-resim-secenek:hover,
.icerik-resim-tip-secenek:hover {
    border-color: rgba(255, 153, 0, 0.36);
    transform: translateY(-1px);
}

.icerik-resim-secenek-ikon,
.icerik-resim-tip-ikon {
    width: 37px;
    height: 37px;

    display: grid;
    place-items: center;

    flex: 0 0 37px;

    border-radius: 50%;

    background: rgba(255, 153, 0, 0.14);
    color: #ff9900;

    font-size: 16px;
}

.icerik-resim-secenek-metin,
.icerik-resim-tip-secenek > span:nth-child(2) {
    min-width: 0;
    flex: 1;

    display: flex;
    flex-direction: column;
    gap: 3px;
}

.icerik-resim-secenek strong,
.icerik-resim-tip-secenek strong {
    color: #ffffff;

    font-size: 12.5px;
    font-weight: 600;
}

.icerik-resim-secenek small,
.icerik-resim-tip-secenek small {
    color: rgba(255, 255, 255, 0.48);

    font-size: 9.5px;
    line-height: 1.35;
    font-weight: 500;
}

.icerik-resim-secenek > i {
    color: rgba(255, 255, 255, 0.38);
    font-size: 11px;
}

.icerik-resim-tip-ikon.fis {
    background: rgba(255, 153, 0, 0.16);
    color: #ff9900;
}

.icerik-resim-tip-ikon.menu {
    background: rgba(52, 120, 246, 0.16);
    color: #5590ff;
}

.icerik-resim-tip-ikon.genel {
    background: rgba(255, 255, 255, 0.09);
    color: rgba(255, 255, 255, 0.76);
}

/* FİŞ ONAY MODALI */

.icerik-resim-onay-modal {
    position: fixed;
    inset: 0;
    z-index: 5100;

    display: grid;
    place-items: center;

    padding: 22px;

    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(8px);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.22s ease,
        visibility 0.22s ease;
}

.icerik-resim-onay-modal.acik {
    opacity: 1;
    visibility: visible;
}

.icerik-resim-onay-dialog {
    position: relative;

    width: min(440px, 100%);

    padding: 22px 18px 18px;

    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 24px;

    background: #050505;
    color: #ffffff;

    text-align: center;

    box-shadow:
        0 30px 90px rgba(0, 0, 0, 0.74);

    transform: scale(0.96);

    transition:
        transform 0.22s ease;
}

.icerik-resim-onay-modal.acik
.icerik-resim-onay-dialog {
    transform: scale(1);
}

.icerik-resim-onay-kapat {
    position: absolute;
    top: 10px;
    right: 10px;

    width: 32px;
    height: 32px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 50%;

    background: #050505;
    color: rgba(255, 255, 255, 0.76);

    font-size: 14px;
}

.icerik-resim-onay-ikon {
    width: 54px;
    height: 54px;

    display: grid;
    place-items: center;

    margin: 0 auto 14px;

    border-radius: 50%;

    background: rgba(255, 153, 0, 0.14);
    color: #ff9900;

    font-size: 25px;
}

.icerik-resim-onay-dialog h2 {
    margin: 0;

    color: #ffffff;

    font-size: 17px;
    font-weight: 600;
}

.icerik-resim-onay-dialog p {
    margin: 8px 0 0;

    color: rgba(255, 255, 255, 0.72);

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

.icerik-resim-onay-dialog p strong {
    color: #ff9900;
    font-weight: 600;
}

.icerik-resim-onay-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;

    margin-top: 19px;
}

.icerik-resim-onay-actions button {
    min-height: 43px;

    border-radius: 14px;

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

.icerik-resim-onay-vazgec {
    border: 1px solid rgba(255, 255, 255, 0.24);

    background: #050505;
    color: #ffffff;
}

.icerik-resim-onay-kullan {
    border: 1px solid #ff9900;

    background: #ff9900;
    color: #050505;
}

/* TOAST */

.icerik-resim-toast-alani {
    position: fixed;
    right: 18px;
    bottom: 22px;
    z-index: 6000;

    width: min(360px, calc(100vw - 36px));

    display: flex;
    flex-direction: column;
    gap: 9px;

    pointer-events: none;
}

.icerik-resim-toast {
    display: flex;
    align-items: center;
    gap: 9px;

    padding: 12px 14px;

    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 15px;

    background: #050505;
    color: #ffffff;

    box-shadow:
        0 18px 50px rgba(0, 0, 0, 0.52);

    opacity: 0;
    transform: translateY(12px);

    transition:
        opacity 0.22s ease,
        transform 0.22s ease;

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

.icerik-resim-toast.goster {
    opacity: 1;
    transform: translateY(0);
}

.icerik-resim-toast.success > i {
    color: #3fc380;
}

.icerik-resim-toast.warning > i {
    color: #ff9900;
}

.icerik-resim-toast.error > i {
    color: #e54857;
}

@media (max-width: 620px) {
    .icerik-resim-sheet {
        padding:
            0
            10px
            max(10px, env(safe-area-inset-bottom));
    }

    .icerik-resim-sheet-dialog {
        border-radius: 24px 24px 18px 18px;
    }

    .icerik-resim-toast-alani {
        right: 12px;
        bottom: 76px;

        width: calc(100vw - 24px);
    }
}

/* =========================================================
   İÇERİK EKLE SAYFASI - KOYU TEMA
   Ana yüzeyler #050505
   ========================================================= */

body.icerik-ekle-modal-acik {
    overflow: hidden;
}

.icerik-ekle-page {
    width: 100%;
    min-height: 100%;
}

.icerik-ekle-container {
    width: min(760px, 100%);
    margin: 0 auto;
    padding: 4px 0 90px;
}

/* SAYFA BAŞLIĞI */

.icerik-ekle-page-header {
    display: flex;
    align-items: center;
    gap: 13px;

    margin-bottom: 18px;
    padding: 15px;

    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 22px;

    background: #050505;
}

.icerik-ekle-page-header-icon {
    width: 46px;
    height: 46px;

    display: grid;
    place-items: center;

    flex: 0 0 46px;

    border-radius: 15px;

    background: rgba(255, 153, 0, 0.15);
    color: #ff9900;

    font-size: 19px;
}

.icerik-ekle-page-header-content {
    min-width: 0;
    flex: 1;
}

.icerik-ekle-page-header h1 {
    margin: 0;

    color: #ffffff;

    font-size: 20px;
    line-height: 1.2;
    font-weight: 600;
}

.icerik-ekle-page-header p {
    margin: 5px 0 0;

    color: rgba(255, 255, 255, 0.52);

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

/* FORM */

.icerik-ekle-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.icerik-ekle-form-section {
    width: 100%;

    padding: 14px;

    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 20px;

    background: #050505;
}

.icerik-ekle-section-heading {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 13px;
}

.icerik-ekle-section-heading > span {
    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    flex: 0 0 34px;

    border-radius: 11px;

    background: rgba(255, 153, 0, 0.14);
    color: #ff9900;

    font-size: 15px;
}

.icerik-ekle-section-heading > div {
    min-width: 0;
    flex: 1;
}

.icerik-ekle-section-heading h2 {
    margin: 0;

    color: #ffffff;

    font-size: 13px;
    line-height: 1.2;
    font-weight: 600;
}

.icerik-ekle-section-heading p {
    margin: 4px 0 0;

    color: rgba(255, 255, 255, 0.48);

    font-size: 10px;
    line-height: 1.4;
    font-weight: 500;
}

/* PUAN */

.icerik-ekle-puanlar {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 7px;
}

.icerik-ekle-puan {
    min-width: 0;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;

    padding: 0 7px;

    border: 1.5px solid transparent;
    border-radius: 9px;

    color: #ffffff;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.icerik-ekle-puan:hover {
    transform: translateY(-1px);
}

.icerik-ekle-puan.cok-uygun {
    background: #4f8f4b;
}

.icerik-ekle-puan.uygun {
    background: #3f5f14;
}

.icerik-ekle-puan.pahali {
    background: #b71c1c;
}

.icerik-ekle-puan.cok-pahali {
    background: #8b0015;
}

.icerik-ekle-puan input {
    position: absolute;

    width: 1px;
    height: 1px;

    opacity: 0;
    pointer-events: none;
}

.icerik-ekle-puan-check {
    display: none;

    color: #ffffff;

    font-size: 13px;
}

.icerik-ekle-puan > span:last-child {
    min-width: 0;

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

    font-size: 9.5px;
    font-weight: 600;
}

.icerik-ekle-puan:has(input:checked) {
    border-color: #ffffff;

    box-shadow:
        0 0 0 3px rgba(255, 255, 255, 0.08);
}

.icerik-ekle-puan:has(input:checked)
.icerik-ekle-puan-check {
    display: inline-flex;
}

/* AÇIKLAMA */

.icerik-ekle-textarea-wrapper {
    position: relative;
}

.icerik-ekle-textarea {
    width: 100%;
    min-height: 115px;
    max-height: 240px;

    display: block;
    resize: vertical;

    padding: 13px 13px 31px;

    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 15px;
    outline: 0;

    background: #050505;
    color: #ffffff;

    font-family: inherit;
    font-size: 12px;
    line-height: 1.55;
    font-weight: 500;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.icerik-ekle-textarea::placeholder {
    color: rgba(255, 255, 255, 0.40);
}

.icerik-ekle-textarea:focus {
    border-color: rgba(255, 153, 0, 0.60);

    box-shadow:
        0 0 0 3px rgba(255, 153, 0, 0.08);
}

.icerik-ekle-karakter-sayaci {
    position: absolute;
    right: 12px;
    bottom: 10px;

    color: rgba(255, 255, 255, 0.38);

    font-size: 9px;
    font-weight: 600;
}

/* HESAP */

.icerik-ekle-hesap-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.icerik-ekle-input-group {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 7px;
}

.icerik-ekle-input-label {
    color: rgba(255, 255, 255, 0.58);

    font-size: 10px;
    font-weight: 600;
}

.icerik-ekle-input-box {
    min-height: 48px;

    display: flex;
    align-items: center;
    gap: 9px;

    padding: 0 12px;

    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 16px;

    background: #050505;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.icerik-ekle-input-box:focus-within {
    border-color: rgba(255, 153, 0, 0.68);

    box-shadow:
        0 0 0 3px rgba(255, 153, 0, 0.08);
}

.icerik-ekle-input-box > i {
    color: #ff9900;
    font-size: 17px;
}

.icerik-ekle-input-box input {
    min-width: 0;
    height: 46px;
    flex: 1;

    padding: 0;

    border: 0;
    outline: 0;

    background: transparent;
    color: #ffffff;

    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
}

.icerik-ekle-input-box input::placeholder {
    color: rgba(255, 255, 255, 0.32);
}

.icerik-ekle-input-suffix {
    color: rgba(255, 255, 255, 0.70);

    font-size: 12px;
    font-weight: 600;
}

.icerik-ekle-kisi-basi {
    min-height: 53px;

    display: flex;
    align-items: center;
    gap: 10px;

    margin-top: 12px;
    padding: 10px 12px;

    border: 1px solid rgba(255, 153, 0, 0.20);
    border-radius: 15px;

    background: #050505;
}

.icerik-ekle-kisi-basi-icon {
    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    flex: 0 0 34px;

    border-radius: 50%;

    background: rgba(255, 153, 0, 0.14);
    color: #ff9900;

    font-size: 15px;
}

.icerik-ekle-kisi-basi-content {
    min-width: 0;
    flex: 1;

    display: flex;
    flex-direction: column;
    gap: 3px;
}

.icerik-ekle-kisi-basi-content small {
    color: rgba(255, 255, 255, 0.46);

    font-size: 9.5px;
    font-weight: 550;
}

.icerik-ekle-kisi-basi-content strong {
    color: #ffffff;

    font-size: 13px;
    font-weight: 600;
}

.icerik-ekle-kisi-spinner,
.icerik-ekle-submit-spinner {
    display: block;

    border-radius: 50%;

    animation:
        icerik-ekle-don 0.7s linear infinite;
}

.icerik-ekle-kisi-spinner {
    width: 18px;
    height: 18px;

    border: 2px solid rgba(255, 255, 255, 0.13);
    border-top-color: #ff9900;
}

@keyframes icerik-ekle-don {
    to {
        transform: rotate(360deg);
    }
}

/* FORM MESAJI */

.icerik-ekle-form-mesaj {
    display: flex;
    align-items: flex-start;
    gap: 9px;

    padding: 12px 13px;

    border: 1px solid rgba(229, 72, 87, 0.32);
    border-radius: 14px;

    background: #050505;
    color: #ff7c88;

    font-size: 11px;
    line-height: 1.45;
    font-weight: 600;
}

.icerik-ekle-form-mesaj[hidden] {
    display: none;
}

/* SUBMIT */

.icerik-ekle-submit {
    width: 100%;
    min-height: 56px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    border: 1px solid #050505;
    border-radius: 18px;

    background: #050505;
    color: #ffffff;

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

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        opacity 0.2s ease;
}

.icerik-ekle-submit:hover:not(:disabled) {
    transform: translateY(-1px);

    box-shadow:
        0 15px 38px rgba(0, 0, 0, 0.38);
}

.icerik-ekle-submit:disabled {
    cursor: wait;
    opacity: 0.48;
}

.icerik-ekle-submit-spinner {
    width: 21px;
    height: 21px;

    border: 2.4px solid rgba(255, 255, 255, 0.25);
    border-top-color: #ffffff;
}

/* MAIL MODALI */

.icerik-ekle-mail-modal {
    position: fixed;
    inset: 0;
    z-index: 6500;

    display: grid;
    place-items: center;

    padding: 22px;

    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(8px);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.22s ease,
        visibility 0.22s ease;
}

.icerik-ekle-mail-modal.acik {
    opacity: 1;
    visibility: visible;
}

.icerik-ekle-mail-dialog {
    position: relative;

    width: min(440px, 100%);

    padding: 22px 18px 18px;

    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 24px;

    background: #050505;
    color: #ffffff;

    text-align: center;

    box-shadow:
        0 30px 90px rgba(0, 0, 0, 0.74);

    transform: scale(0.96);

    transition:
        transform 0.22s ease;
}

.icerik-ekle-mail-modal.acik
.icerik-ekle-mail-dialog {
    transform: scale(1);
}

.icerik-ekle-mail-close {
    position: absolute;
    top: 10px;
    right: 10px;

    width: 32px;
    height: 32px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 50%;

    background: #050505;
    color: rgba(255, 255, 255, 0.76);

    font-size: 14px;
}

.icerik-ekle-mail-icon {
    width: 54px;
    height: 54px;

    display: grid;
    place-items: center;

    margin: 0 auto 14px;

    border-radius: 50%;

    background: rgba(255, 153, 0, 0.14);
    color: #ff9900;

    font-size: 25px;
}

.icerik-ekle-mail-dialog h2 {
    margin: 0;

    color: #ffffff;

    font-size: 17px;
    font-weight: 600;
}

.icerik-ekle-mail-dialog p {
    margin: 8px 0 0;

    color: rgba(255, 255, 255, 0.72);

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

.icerik-ekle-mail-actions {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: 10px;

    margin-top: 19px;
}

.icerik-ekle-mail-actions > * {
    min-height: 43px;

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

    border-radius: 14px;

    text-decoration: none;

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

.icerik-ekle-mail-cancel {
    border: 1px solid rgba(255, 255, 255, 0.24);

    background: #050505;
    color: #ffffff;
}

.icerik-ekle-mail-confirm {
    border: 1px solid #ff9900;

    background: #ff9900;
    color: #ffffff;
}

/* TOAST */

.icerik-ekle-toast-container {
    position: fixed;
    right: 18px;
    bottom: 22px;
    z-index: 7000;

    width: min(360px, calc(100vw - 36px));

    display: flex;
    flex-direction: column;
    gap: 9px;

    pointer-events: none;
}

.icerik-ekle-toast {
    display: flex;
    align-items: center;
    gap: 9px;

    padding: 12px 14px;

    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 15px;

    background: #050505;
    color: #ffffff;

    box-shadow:
        0 18px 50px rgba(0, 0, 0, 0.52);

    opacity: 0;
    transform: translateY(12px);

    transition:
        opacity 0.22s ease,
        transform 0.22s ease;

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

.icerik-ekle-toast.goster {
    opacity: 1;
    transform: translateY(0);
}

.icerik-ekle-toast.success > i {
    color: #3fc380;
}

.icerik-ekle-toast.warning > i {
    color: #ff9900;
}

.icerik-ekle-toast.error > i {
    color: #e54857;
}

@media (max-width: 680px) {
    .icerik-ekle-container {
        padding-bottom: 110px;
    }

    .icerik-ekle-page-header {
        align-items: flex-start;
    }

    .icerik-ekle-puanlar {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .icerik-ekle-hesap-grid {
        grid-template-columns: 1fr;
    }

    .icerik-ekle-toast-container {
        right: 12px;
        bottom: 76px;

        width: calc(100vw - 24px);
    }
}

/* =========================================================
   MEKÂNDAN İÇERİK EKLE - SABİT MEKÂN KARTI
   KOYU TEMA
   ========================================================= */

.mekan-icerik-sabit-kart {
    width: 100%;
    min-height: 72px;

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

    padding: 11px 12px;

    border: 1px solid rgba(255, 153, 0, 0.22);
    border-radius: 18px;

    background: #050505;
    color: #ffffff;
}

.mekan-icerik-sabit-resim,
.mekan-icerik-sabit-ikon {
    width: 48px;
    height: 48px;

    flex: 0 0 48px;

    border-radius: 14px;
}

.mekan-icerik-sabit-resim {
    display: block;

    object-fit: cover;
}

.mekan-icerik-sabit-ikon {
    display: grid;
    place-items: center;

    background: rgba(255, 153, 0, 0.14);
    color: #ff9900;

    font-size: 19px;
}

.mekan-icerik-sabit-bilgi {
    min-width: 0;
    flex: 1;

    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mekan-icerik-sabit-bilgi strong {
    overflow: hidden;
    text-overflow: ellipsis;

    color: #ffffff;

    font-size: 12.5px;
    line-height: 1.25;
    font-weight: 600;
}

.mekan-icerik-sabit-bilgi span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    color: rgba(255, 255, 255, 0.50);

    font-size: 10px;
    line-height: 1.35;
    font-weight: 500;
}

.mekan-icerik-sabit-bilgi small {
    width: max-content;
    max-width: 100%;

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

    padding: 4px 7px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;

    color: rgba(255, 255, 255, 0.62);

    font-size: 8.5px;
    font-weight: 600;
}

.mekan-icerik-sabit-onay {
    width: 28px;
    height: 28px;

    display: grid;
    place-items: center;

    flex: 0 0 28px;

    border-radius: 50%;

    background: rgba(255, 153, 0, 0.14);
    color: #ff9900;

    font-size: 14px;
}

/* =========================================================
   İÇERİK DÜZENLEME
========================================================= */

.icerik-duzenleme-sayfasi {
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
    padding-bottom: 80px;
}

.icerik-duzenleme-ust-etiket {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    margin-bottom: 10px;
    padding: 7px 11px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;

    background: rgba(255, 255, 255, 0.055);
    color: rgba(255, 255, 255, 0.68);

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

.icerik-duzenleme-ust-etiket i {
    color: #f59e0b;
}

.icerik-duzenleme-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.icerik-duzenleme-kart {
    width: 100%;
    padding: 18px;

    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 20px;

    background: rgba(255, 255, 255, 0.045);

    box-shadow:
        0 16px 40px rgba(0, 0, 0, 0.11);
}

.icerik-duzenleme-kart-baslik {
    display: flex;
    align-items: center;
    gap: 11px;

    margin-bottom: 15px;
}

.icerik-duzenleme-kart-baslik > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 40px;
    height: 40px;

    border-radius: 13px;

    background: rgba(245, 158, 11, 0.13);
    color: #f59e0b;

    font-size: 17px;
}

.icerik-duzenleme-kart-baslik > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.icerik-duzenleme-kart-baslik strong {
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
}

.icerik-duzenleme-kart-baslik p {
    margin: 0;

    color: rgba(255, 255, 255, 0.52);

    font-size: 11px;
    line-height: 1.4;
    font-weight: 500;
}

/* Yükleme */

.icerik-duzenleme-yukleniyor {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;

    min-height: 220px;
    padding: 24px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 22px;

    background: rgba(255, 255, 255, 0.035);
}

.icerik-duzenleme-yukleniyor > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.icerik-duzenleme-yukleniyor strong {
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
}

.icerik-duzenleme-yukleniyor span:not(.icerik-duzenleme-spinner) {
    color: rgba(255, 255, 255, 0.53);
    font-size: 11px;
}

.icerik-duzenleme-spinner,
.icerik-duzenleme-button-spinner,
.icerik-duzenleme-mini-spinner {
    display: inline-block;

    border-style: solid;
    border-color:
        rgba(255, 255, 255, 0.23)
        rgba(255, 255, 255, 0.23)
        #ffffff
        #ffffff;

    border-radius: 50%;

    animation:
        icerik-duzenleme-don 0.75s linear infinite;
}

.icerik-duzenleme-spinner {
    width: 27px;
    height: 27px;
    border-width: 3px;
}

.icerik-duzenleme-button-spinner {
    width: 19px;
    height: 19px;
    border-width: 2px;
}

.icerik-duzenleme-mini-spinner {
    width: 18px;
    height: 18px;
    border-width: 2px;
}

@keyframes icerik-duzenleme-don {
    to {
        transform: rotate(360deg);
    }
}

/* Yükleme hatası */

.icerik-duzenleme-hata {
    display: flex;
    align-items: center;
    gap: 13px;

    padding: 16px;

    border: 1px solid rgba(239, 68, 68, 0.35);
    border-radius: 18px;

    background: rgba(239, 68, 68, 0.09);
}

.icerik-duzenleme-hata[hidden] {
    display: none;
}

.icerik-duzenleme-hata-ikon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 40px;
    height: 40px;

    border-radius: 13px;

    background: rgba(239, 68, 68, 0.14);
    color: #f87171;
}

.icerik-duzenleme-hata > div {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 3px;
}

.icerik-duzenleme-hata strong {
    color: #ffffff;
    font-size: 13px;
}

.icerik-duzenleme-hata > div span {
    color: rgba(255, 255, 255, 0.62);
    font-size: 11px;
}

.icerik-duzenleme-hata button {
    flex: 0 0 auto;

    padding: 9px 13px;

    border: 0;
    border-radius: 11px;

    background: #ef4444;
    color: #ffffff;

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

    cursor: pointer;
}

/* Mekân */

.icerik-duzenleme-mekan {
    display: flex;
    align-items: center;
    gap: 12px;
}

.icerik-duzenleme-mekan-ikon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 44px;
    height: 44px;

    border-radius: 14px;

    background: rgba(245, 158, 11, 0.14);
    color: #f59e0b;

    font-size: 20px;
}

.icerik-duzenleme-mekan-bilgi {
    display: flex;
    flex: 1;
    flex-direction: column;

    min-width: 0;
}

.icerik-duzenleme-mekan-etiket {
    margin-bottom: 4px;

    color: rgba(255, 255, 255, 0.47);

    font-size: 10px;
    font-weight: 600;
}

.icerik-duzenleme-mekan-bilgi strong,
.icerik-duzenleme-mekan-bilgi > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.icerik-duzenleme-mekan-bilgi strong {
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
}

.icerik-duzenleme-mekan-bilgi > span:last-child {
    margin-top: 4px;

    color: rgba(255, 255, 255, 0.57);

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

.icerik-duzenleme-mekan-kilit {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 34px;
    height: 34px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.055);
    color: rgba(255, 255, 255, 0.31);
}

/* Resim placeholder */

.icerik-duzenleme-resim-placeholder {
    display: flex;
    align-items: center;
    gap: 12px;

    min-height: 86px;
    padding: 15px;

    border: 1px dashed rgba(255, 255, 255, 0.14);
    border-radius: 16px;

    background: rgba(255, 255, 255, 0.025);
}

.icerik-duzenleme-resim-placeholder[hidden] {
    display: none;
}

.icerik-duzenleme-resim-placeholder > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    border-radius: 13px;

    background: rgba(245, 158, 11, 0.13);
    color: #f59e0b;
}

.icerik-duzenleme-resim-placeholder > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.icerik-duzenleme-resim-placeholder strong {
    color: #ffffff;
    font-size: 12px;
}

.icerik-duzenleme-resim-placeholder p {
    margin: 0;

    color: rgba(255, 255, 255, 0.5);
    font-size: 11px;
}

/* Puanlar */

.icerik-duzenleme-puanlar {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.icerik-duzenleme-puan {
    min-width: 0;
    cursor: pointer;
}

.icerik-duzenleme-puan input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.icerik-duzenleme-puan-icerik {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;

    width: 100%;
    min-height: 38px;
    padding: 7px;

    border: 1.5px solid transparent;
    border-radius: 9px;

    color: #ffffff;

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

    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}

.icerik-duzenleme-puan:hover
.icerik-duzenleme-puan-icerik {
    transform: translateY(-1px);
}

.icerik-duzenleme-puan-icerik i {
    display: none;
    font-size: 13px;
}

.icerik-duzenleme-puan input:checked +
.icerik-duzenleme-puan-icerik {
    border-color: #ffffff;

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

.icerik-duzenleme-puan input:checked +
.icerik-duzenleme-puan-icerik i {
    display: inline-block;
}

.icerik-duzenleme-puan.cok-uygun
.icerik-duzenleme-puan-icerik {
    background: #4f8f4b;
}

.icerik-duzenleme-puan.uygun
.icerik-duzenleme-puan-icerik {
    background: #3f5f14;
}

.icerik-duzenleme-puan.pahali
.icerik-duzenleme-puan-icerik {
    background: #b71c1c;
}

.icerik-duzenleme-puan.cok-pahali
.icerik-duzenleme-puan-icerik {
    background: #8b0015;
}

/* Açıklama */

.icerik-duzenleme-textarea-alani {
    position: relative;
}

.icerik-duzenleme-textarea-alani textarea {
    display: block;

    width: 100%;
    min-height: 120px;
    padding: 14px 14px 32px;

    resize: vertical;

    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 15px;
    outline: none;

    background: rgba(255, 255, 255, 0.045);
    color: #ffffff;

    font: inherit;
    font-size: 12px;
    line-height: 1.55;

    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}

.icerik-duzenleme-textarea-alani textarea::placeholder {
    color: rgba(255, 255, 255, 0.37);
}

.icerik-duzenleme-textarea-alani textarea:focus {
    border-color: rgba(245, 158, 11, 0.7);

    box-shadow:
        0 0 0 3px rgba(245, 158, 11, 0.1);
}

.icerik-duzenleme-karakter {
    position: absolute;
    right: 12px;
    bottom: 9px;

    color: rgba(255, 255, 255, 0.38);

    font-size: 9px;
    font-weight: 600;
}

/* Hesap */

.icerik-duzenleme-hesap-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.icerik-duzenleme-input-grup {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.icerik-duzenleme-input-grup > span:first-child {
    color: rgba(255, 255, 255, 0.5);

    font-size: 10px;
    font-weight: 600;
}

.icerik-duzenleme-input-kutu {
    display: flex;
    align-items: center;
    gap: 9px;

    min-height: 48px;
    padding: 0 13px;

    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 15px;

    background: rgba(255, 255, 255, 0.05);

    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}

.icerik-duzenleme-input-kutu:focus-within {
    border-color: rgba(245, 158, 11, 0.7);

    box-shadow:
        0 0 0 3px rgba(245, 158, 11, 0.1);
}

.icerik-duzenleme-input-kutu > i {
    flex: 0 0 auto;
    color: #f59e0b;
    font-size: 16px;
}

.icerik-duzenleme-input-kutu input {
    flex: 1;

    width: 100%;
    min-width: 0;
    padding: 0;

    border: 0;
    outline: none;

    background: transparent;
    color: #ffffff;

    font: inherit;
    font-size: 12px;
    font-weight: 600;
}

.icerik-duzenleme-input-kutu input::placeholder {
    color: rgba(255, 255, 255, 0.34);
}

.icerik-duzenleme-input-kutu strong {
    color: rgba(255, 255, 255, 0.65);

    font-size: 12px;
    font-weight: 600;
}

.icerik-duzenleme-kisi-basi {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-top: 12px;
    padding: 12px;

    border: 1px solid rgba(245, 158, 11, 0.19);
    border-radius: 15px;

    background: rgba(245, 158, 11, 0.1);
}

.icerik-duzenleme-kisi-basi-ikon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 36px;
    height: 36px;

    border-radius: 12px;

    background: rgba(245, 158, 11, 0.14);
    color: #f59e0b;
}

.icerik-duzenleme-kisi-basi > div {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
}

.icerik-duzenleme-kisi-basi > div span {
    color: rgba(255, 255, 255, 0.48);

    font-size: 9px;
    font-weight: 600;
}

.icerik-duzenleme-kisi-basi strong {
    color: #ffffff;

    font-size: 13px;
    font-weight: 600;
}

/* Form hata */

.icerik-duzenleme-form-hata {
    display: flex;
    align-items: center;
    gap: 9px;

    padding: 13px 14px;

    border: 1px solid rgba(239, 68, 68, 0.35);
    border-radius: 14px;

    background: rgba(239, 68, 68, 0.09);
    color: #fca5a5;

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

.icerik-duzenleme-form-hata[hidden] {
    display: none;
}

/* Butonlar */

.icerik-duzenleme-kaydet {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    width: 100%;
    min-height: 56px;
    padding: 12px 18px;

    border: 0;
    border-radius: 18px;

    background: #050505;
    color: #ffffff;

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

    cursor: pointer;

    transition:
        transform 0.18s ease,
        opacity 0.18s ease,
        background-color 0.18s ease;
}

.icerik-duzenleme-kaydet:hover:not(:disabled) {
    transform: translateY(-1px);
    background: #737373;
}

.icerik-duzenleme-kaydet:disabled {
    cursor: wait;
    opacity: 0.58;
}

.icerik-duzenleme-tehlike {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    padding: 17px;

    border: 1px solid rgba(239, 68, 68, 0.26);
    border-radius: 18px;

    background: rgba(239, 68, 68, 0.055);
}

.icerik-duzenleme-tehlike > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.icerik-duzenleme-tehlike strong {
    color: #fca5a5;
    font-size: 12px;
    font-weight: 600;
}

.icerik-duzenleme-tehlike p {
    margin: 0;

    color: rgba(255, 255, 255, 0.47);

    font-size: 10px;
    line-height: 1.45;
}

.icerik-duzenleme-tehlike button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    flex: 0 0 auto;

    min-height: 42px;
    padding: 9px 14px;

    border: 1px solid rgba(248, 113, 113, 0.72);
    border-radius: 13px;

    background: transparent;
    color: #f87171;

    font: inherit;
    font-size: 11px;
    font-weight: 600;

    cursor: pointer;
}

/* Silme modalı */

body.icerik-duzenleme-modal-acik {
    overflow: hidden;
}

.icerik-duzenleme-sil-modal {
    position: fixed;
    z-index: 1600;
    inset: 0;

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

    padding: 20px;

    visibility: hidden;
    opacity: 0;

    background: #050505;
    backdrop-filter: blur(5px);

    transition:
        opacity 0.2s ease,
        visibility 0.2s ease;
}

.icerik-duzenleme-sil-modal.acik {
    visibility: visible;
    opacity: 1;
}

.icerik-duzenleme-sil-dialog {
    position: relative;

    width: min(100%, 420px);
    padding: 24px 20px 20px;

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;

    background: #050505;

    text-align: center;

    box-shadow:
        0 28px 80px rgba(0, 0, 0, 0.42);

    transform: translateY(12px) scale(0.98);

    transition:
        transform 0.2s ease;
}

.icerik-duzenleme-sil-modal.acik
.icerik-duzenleme-sil-dialog {
    transform: translateY(0) scale(1);
}

.icerik-duzenleme-sil-kapat {
    position: absolute;
    top: 10px;
    right: 10px;

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

    width: 32px;
    height: 32px;

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;

    background: rgba(0, 0, 0, 0.26);
    color: #ffffff;

    cursor: pointer;
}

.icerik-duzenleme-sil-ikon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 56px;
    height: 56px;
    margin-bottom: 14px;

    border-radius: 50%;

    background: rgba(239, 68, 68, 0.13);
    color: #f87171;

    font-size: 25px;
}

.icerik-duzenleme-sil-dialog h2 {
    margin: 0 0 8px;

    color: #ffffff;

    font-size: 17px;
    font-weight: 600;
}

.icerik-duzenleme-sil-dialog p {
    margin: 0;

    color: rgba(255, 255, 255, 0.62);

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

.icerik-duzenleme-sil-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;

    margin-top: 20px;
}

.icerik-duzenleme-sil-actions button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    min-height: 44px;
    padding: 10px;

    border-radius: 14px;

    font: inherit;
    font-size: 11px;
    font-weight: 600;

    cursor: pointer;
}

.icerik-duzenleme-sil-vazgec {
    border: 1px solid rgba(255, 255, 255, 0.19);

    background: transparent;
    color: #ffffff;
}

.icerik-duzenleme-sil-onay {
    border: 1px solid #ef4444;

    background: #ef4444;
    color: #ffffff;
}

/* Toast */

.icerik-duzenleme-toast-alani {
    position: fixed;
    z-index: 1800;
    right: 22px;
    bottom: 22px;

    display: flex;
    flex-direction: column;
    gap: 9px;

    pointer-events: none;
}

.icerik-duzenleme-toast {
    display: flex;
    align-items: center;
    gap: 9px;

    min-width: 250px;
    max-width: 380px;
    padding: 12px 14px;

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;

    background: #050505;
    color: #ffffff;

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

    opacity: 0;
    transform: translateY(12px);

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.3);

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}

.icerik-duzenleme-toast.goster {
    opacity: 1;
    transform: translateY(0);
}

.icerik-duzenleme-toast.success i {
    color: #22c55e;
}

.icerik-duzenleme-toast.warning i {
    color: #f59e0b;
}

.icerik-duzenleme-toast.error i {
    color: #ef4444;
}

@media (max-width: 700px) {
    .icerik-duzenleme-sayfasi {
        padding-bottom: 100px;
    }

    .icerik-duzenleme-puanlar {
        grid-template-columns: 1fr 1fr;
    }

    .icerik-duzenleme-hesap-grid {
        grid-template-columns: 1fr;
    }

    .icerik-duzenleme-tehlike {
        align-items: stretch;
        flex-direction: column;
    }

    .icerik-duzenleme-tehlike button {
        width: 100%;
    }

    .icerik-duzenleme-toast-alani {
        right: 14px;
        bottom: 74px;
        left: 14px;
    }

    .icerik-duzenleme-toast {
        width: 100%;
        min-width: 0;
        max-width: none;
    }
}

@media (max-width: 480px) {
    .icerik-duzenleme-kart {
        padding: 15px;
        border-radius: 18px;
    }

    .icerik-duzenleme-puan-icerik {
        min-height: 40px;
    }

    .icerik-duzenleme-hata {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .icerik-duzenleme-hata button {
        width: 100%;
    }
}

/* =========================================================
   RESİM DÜZENLEYİCİ — KOYU TEMA EKLERİ
========================================================= */

.icerik-resim-duzenleyici {
    width: 100%;
}

.icerik-resim-gorsel-alani {
    position: absolute;
    inset: 0;

    overflow: hidden;

    border-radius: inherit;
    background: rgba(255, 255, 255, 0.06);
}

.icerik-resim-gorsel-alani > img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.icerik-resim-gorsel-hata {
    position: absolute;
    inset: 0;

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

    padding: 12px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.05),
            rgba(255, 255, 255, 0.015)
        );

    color: rgba(255, 255, 255, 0.48);
    text-align: center;
}

.icerik-resim-gorsel-hata[hidden] {
    display: none;
}

.icerik-resim-gorsel-hata i {
    font-size: 27px;
}

.icerik-resim-gorsel-hata small {
    font-size: 9px;
    font-weight: 600;
}

.icerik-resim-karti-yeni {
    box-shadow:
        inset 0 0 0 1px rgba(34, 197, 94, 0.28);
}

.icerik-resim-karti-mevcut {
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.025);
}

.icerik-resim-yeni-etiketi {
    position: absolute;
    z-index: 4;
    top: 38px;
    left: 8px;

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

    min-height: 22px;
    padding: 4px 8px;

    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 999px;

    background: rgba(22, 163, 74, 0.9);
    color: #ffffff;

    font-size: 9px;
    line-height: 1;
    font-weight: 600;

    box-shadow:
        0 5px 14px rgba(0, 0, 0, 0.22);

    pointer-events: none;
}

.icerik-resim-duzenleyici
.icerik-resim-karti {
    position: relative;
    overflow: hidden;
}

.icerik-resim-duzenleyici
.icerik-resim-tip-etiketi,
.icerik-resim-duzenleyici
.icerik-resim-sil,
.icerik-resim-duzenleyici
.icerik-resim-siralama {
    z-index: 5;
}

.icerik-resim-duzenleyici
.icerik-resim-siralama button:disabled {
    opacity: 0.34;
    cursor: default;
}

.icerik-resim-duzenleyici
.icerik-resim-ekle-karti:disabled {
    opacity: 0.5;
    cursor: wait;
}

/* =========================================================
   ARAMA SAYFASI — KOYU TEMA
========================================================= */

.arama-sayfasi {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding-bottom: 90px;
}

.arama-sayfasi [hidden] {
    display: none !important;
}

.arama-page-header {
    margin-bottom: 16px;
}

/* =========================================================
   ÜST ALAN
========================================================= */

.arama-ust-alan {
    display: flex;
    flex-direction: column;
    gap: 16px;

    padding: 18px;

    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 22px;

    background: rgba(255, 255, 255, 0.045);

    box-shadow:
        0 16px 40px rgba(0, 0, 0, 0.11);
}

.arama-form {
    display: flex;
    align-items: stretch;
    gap: 10px;
}

.arama-input-kapsayici {
    position: relative;

    display: flex;
    align-items: center;
    flex: 1;

    min-width: 0;
}

.arama-input-ikon {
    position: absolute;
    z-index: 2;
    left: 15px;

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

    color: #8a8a8a;

    font-size: 17px;

    pointer-events: none;
}

.arama-input-kapsayici input {
    width: 100%;
    min-height: 52px;
    padding: 0 46px 0 44px;

    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 15px;
    outline: none;

    background: #050505;
    color: #ffffff;

    font: inherit;
    font-size: 13px;
    font-weight: 600;

    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background-color 0.18s ease;
}

.arama-input-kapsayici input::placeholder {
    color: rgba(255, 255, 255, 0.42);
}

.arama-input-kapsayici input:focus {
    border-color: rgba(255, 255, 255, 0.24);
    background: #363636;

    box-shadow:
        0 0 0 3px rgba(255, 255, 255, 0.055);
}

.arama-input-temizle {
    position: absolute;
    z-index: 3;
    right: 12px;

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

    width: 30px;
    height: 30px;
    padding: 0;

    border: 0;
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.065);
    color: rgba(255, 255, 255, 0.58);

    font-size: 13px;

    cursor: pointer;

    transition:
        background-color 0.18s ease,
        color 0.18s ease;
}

.arama-input-temizle:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

.arama-gonder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    flex: 0 0 auto;

    min-width: 108px;
    min-height: 52px;
    padding: 0 18px;

    border: 0;
    border-radius: 15px;

    background: #050505;
    color: #ffffff;

    font: inherit;
    font-size: 12px;
    font-weight: 600;

    cursor: pointer;

    transition:
        transform 0.18s ease,
        opacity 0.18s ease,
        background-color 0.18s ease;
}

.arama-gonder:hover:not(:disabled) {
    transform: translateY(-1px);
    background: #737373;
}

.arama-gonder:disabled {
    cursor: wait;
    opacity: 0.55;
}

/* =========================================================
   KATEGORİLER
========================================================= */

.arama-kategori-listesi {
    display: grid;
    grid-template-columns: repeat(6, minmax(82px, 1fr));
    gap: 10px;
}

.arama-kategori {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 7px;

    min-width: 0;
    padding: 3px;

    border: 0;

    background: transparent;
    color: rgba(255, 255, 255, 0.68);

    font: inherit;

    cursor: pointer;
}

.arama-kategori-ikon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 54px;
    height: 54px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.055);
    color: rgba(255, 255, 255, 0.72);

    font-size: 20px;

    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        background-color 0.18s ease,
        color 0.18s ease,
        box-shadow 0.18s ease;
}

.arama-kategori:hover
.arama-kategori-ikon {
    transform: translateY(-2px);

    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.09);
}

.arama-kategori-yazi {
    overflow: hidden;

    width: 100%;

    color: rgba(255, 255, 255, 0.68);

    font-size: 10px;
    font-weight: 600;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.arama-kategori.aktif
.arama-kategori-ikon {
    border-color: #050505;
    background: #2f2f2f;
    color: #ffffff;

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.24);
}

.arama-kategori.aktif
.arama-kategori-yazi {
    color: #ffffff;
    font-weight: 600;
}

/* =========================================================
   SIRALAMA
========================================================= */

.arama-siralama-listesi {
    display: flex;
    align-items: center;
    gap: 8px;

    overflow-x: auto;

    scrollbar-width: none;
}

.arama-siralama-listesi::-webkit-scrollbar {
    display: none;
}

.arama-siralama {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    flex: 0 0 auto;

    min-height: 36px;
    padding: 8px 12px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;

    background: rgba(255, 255, 255, 0.055);
    color: rgba(255, 255, 255, 0.68);

    font: inherit;
    font-size: 10px;
    font-weight: 600;

    cursor: pointer;

    transition:
        border-color 0.18s ease,
        background-color 0.18s ease,
        color 0.18s ease;
}

.arama-siralama:hover {
    border-color: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}

.arama-siralama.aktif {
    border-color: #050505;
    background: #050505;
    color: #ffffff;
}

/* =========================================================
   SONUÇ ALANI
========================================================= */

.arama-sonuc-bolumu {
    margin-top: 18px;
    padding: 18px;

    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 22px;

    background: rgba(255, 255, 255, 0.045);

    box-shadow:
        0 16px 40px rgba(0, 0, 0, 0.11);
}

.arama-sonuc-baslik-satiri {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    margin-bottom: 15px;
}

.arama-sonuc-baslik {
    display: flex;
    align-items: center;
    gap: 11px;

    min-width: 0;
}

.arama-sonuc-baslik-ikon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 39px;
    height: 39px;

    border-radius: 13px;

    background: rgba(255, 255, 255, 0.07);
    color: #b4b4b4;

    font-size: 15px;
}

.arama-sonuc-baslik > div {
    display: flex;
    flex-direction: column;
    gap: 3px;

    min-width: 0;
}

.arama-sonuc-baslik strong {
    overflow: hidden;

    color: #ffffff;

    font-size: 13px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.arama-sonuc-baslik span:last-child {
    color: rgba(255, 255, 255, 0.51);

    font-size: 10px;
    font-weight: 550;
}

.arama-gecmisi-temizle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    flex: 0 0 auto;

    min-height: 38px;
    padding: 8px 12px;

    border: 1px solid rgba(248, 113, 113, 0.32);
    border-radius: 12px;

    background: rgba(239, 68, 68, 0.065);
    color: #f87171;

    font: inherit;
    font-size: 10px;
    font-weight: 600;

    cursor: pointer;

    transition:
        border-color 0.18s ease,
        background-color 0.18s ease;
}

.arama-gecmisi-temizle:hover {
    border-color: rgba(248, 113, 113, 0.6);
    background: rgba(239, 68, 68, 0.12);
}

/* =========================================================
   SONUÇ KARTLARI
========================================================= */

.arama-sonuc-listesi {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.arama-sonuc-karti {
    position: relative;

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

    min-height: 72px;
    padding: 8px 10px 8px 8px;

    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 18px;
    outline: none;

    background: rgba(255, 255, 255, 0.06);

    cursor: pointer;

    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        background-color 0.18s ease,
        box-shadow 0.18s ease;
}

.arama-sonuc-karti:hover,
.arama-sonuc-karti:focus-visible {
    transform: translateY(-1px);

    border-color: rgba(255, 255, 255, 0.17);
    background: rgba(255, 255, 255, 0.085);

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

.arama-kart-gorsel-wrapper {
    position: relative;

    flex: 0 0 auto;
}

.arama-kart-gorsel {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 56px;
    height: 56px;

    overflow: hidden;

    background: #ffffff;
    color: #2f2f2f;

    font-size: 22px;
    font-weight: 600;
}

.arama-kart-gorsel-uye {
    border-radius: 50%;
}

.arama-kart-gorsel-mekan {
    border-radius: 15px;
}

.arama-kart-gorsel img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.arama-kart-tip-ikon {
    position: absolute;
    right: -2px;
    bottom: -2px;

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

    width: 21px;
    height: 21px;

    border: 2px solid #373737;
    border-radius: 50%;

    background: #2f2f2f;
    color: #ffffff;

    font-size: 10px;
}

.arama-kart-icerik {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 4px;

    min-width: 0;
    padding-right: 5px;
}

.arama-kart-baslik {
    overflow: hidden;

    color: #ffffff;

    font-size: 13px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.arama-kart-aciklama {
    overflow: hidden;

    color: rgba(255, 255, 255, 0.66);

    font-size: 10.5px;
    font-weight: 550;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.arama-kart-meta,
.arama-kart-rozetler {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;

    margin-top: 2px;
}

.arama-kart-meta > span,
.arama-mesafe-rozeti {
    display: inline-flex;
    align-items: center;
    gap: 4px;

    color: rgba(255, 255, 255, 0.48);

    font-size: 9px;
    font-weight: 600;
}

.arama-meta-takip {
    color: #4ade80 !important;
}

.arama-hsp-rozeti {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 20px;
    padding: 3px 7px;

    border-radius: 999px;

    color: #ffffff;

    font-size: 8.5px;
    font-weight: 600;
}

.arama-hsp-rozeti.cok-uygun {
    background: #5fa85a;
}

.arama-hsp-rozeti.uygun {
    background: #3f5f14;
}

.arama-hsp-rozeti.pahali {
    background: #c8172d;
}

.arama-hsp-rozeti.cok-pahali {
    background: #850015;
}

.arama-hsp-rozeti.varsayilan {
    background: rgba(255, 255, 255, 0.18);
}

.arama-rating-rozeti {
    display: inline-flex;
    align-items: center;
    gap: 4px;

    color: #f59e0b;

    font-size: 10px;
    font-weight: 600;
}

.arama-kart-sag {
    display: flex;
    align-items: center;
    gap: 7px;

    flex: 0 0 auto;
}

.arama-kart-gecmis-sil {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 29px;
    height: 29px;
    padding: 0;

    border: 0;
    border-radius: 50%;

    background: transparent;
    color: rgba(255, 255, 255, 0.52);

    cursor: pointer;

    transition:
        background-color 0.18s ease,
        color 0.18s ease,
        opacity 0.18s ease;
}

.arama-kart-gecmis-sil:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #f87171;
}

.arama-kart-gecmis-sil.yukleniyor {
    cursor: wait;
    opacity: 0.4;
}

.arama-takip-rozeti {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 21px;
    height: 21px;

    border-radius: 50%;

    background: #20b26b;
    color: #ffffff;

    font-size: 9px;
}

.arama-kart-ok {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 26px;
    height: 26px;

    color: rgba(255, 255, 255, 0.32);

    font-size: 10px;
}

/* =========================================================
   YÜKLEME / HATA / BOŞ
========================================================= */

.arama-yukleniyor,
.arama-hata,
.arama-bos {
    min-height: 190px;

    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 18px;

    background: rgba(255, 255, 255, 0.025);
}

.arama-yukleniyor {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
}

.arama-yukleniyor > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.arama-yukleniyor strong {
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
}

.arama-yukleniyor > div span {
    color: rgba(255, 255, 255, 0.51);
    font-size: 10px;
}

.arama-spinner,
.arama-modal-button-spinner {
    display: inline-block;

    border-style: solid;
    border-color:
        rgba(255, 255, 255, 0.2)
        rgba(255, 255, 255, 0.2)
        #ffffff
        #ffffff;

    border-radius: 50%;

    animation: arama-don 0.75s linear infinite;
}

.arama-spinner {
    width: 27px;
    height: 27px;
    border-width: 3px;
}

.arama-modal-button-spinner {
    width: 17px;
    height: 17px;
    border-width: 2px;
}

@keyframes arama-don {
    to {
        transform: rotate(360deg);
    }
}

.arama-bos {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    padding: 25px;

    text-align: center;
}

.arama-bos-ikon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 52px;
    height: 52px;
    margin-bottom: 12px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.68);

    font-size: 20px;
}

.arama-bos strong {
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
}

.arama-bos p {
    max-width: 390px;
    margin: 7px 0 0;

    color: rgba(255, 255, 255, 0.53);

    font-size: 10.5px;
    line-height: 1.55;
}

.arama-hata {
    display: flex;
    align-items: center;
    gap: 12px;

    min-height: auto;
    padding: 15px;

    border-color: rgba(239, 68, 68, 0.3);
    background: rgba(239, 68, 68, 0.07);
}

.arama-hata > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 39px;
    height: 39px;

    border-radius: 13px;

    background: rgba(239, 68, 68, 0.13);
    color: #f87171;
}

.arama-hata > div {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 3px;
}

.arama-hata strong {
    color: #ffffff;
    font-size: 12px;
}

.arama-hata p {
    margin: 0;

    color: rgba(255, 255, 255, 0.61);

    font-size: 10px;
}

.arama-hata button {
    flex: 0 0 auto;

    min-height: 36px;
    padding: 8px 12px;

    border: 0;
    border-radius: 11px;

    background: #ef4444;
    color: #ffffff;

    font: inherit;
    font-size: 10px;
    font-weight: 600;

    cursor: pointer;
}

/* =========================================================
   MODAL
========================================================= */

body.arama-modal-acik {
    overflow: hidden;
}

.arama-modal {
    position: fixed;
    z-index: 1700;
    inset: 0;

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

    padding: 20px;

    visibility: hidden;
    opacity: 0;

    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(5px);

    transition:
        visibility 0.2s ease,
        opacity 0.2s ease;
}

.arama-modal.acik {
    visibility: visible;
    opacity: 1;
}

.arama-modal-dialog {
    position: relative;

    width: min(100%, 420px);
    padding: 25px 20px 20px;

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;

    background: #202020;

    text-align: center;

    transform: translateY(12px) scale(0.98);

    box-shadow:
        0 28px 80px rgba(0, 0, 0, 0.42);

    transition: transform 0.2s ease;
}

.arama-modal.acik
.arama-modal-dialog {
    transform: translateY(0) scale(1);
}

.arama-modal-kapat {
    position: absolute;
    top: 10px;
    right: 10px;

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

    width: 32px;
    height: 32px;
    padding: 0;

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.055);
    color: #ffffff;

    cursor: pointer;
}

.arama-modal-ikon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 56px;
    height: 56px;
    margin-bottom: 14px;

    border-radius: 50%;

    background: rgba(239, 68, 68, 0.13);
    color: #f87171;

    font-size: 23px;
}

.arama-modal-dialog h2 {
    margin: 0 0 8px;

    color: #ffffff;

    font-size: 17px;
    font-weight: 600;
}

.arama-modal-dialog p {
    margin: 0;

    color: rgba(255, 255, 255, 0.6);

    font-size: 10.5px;
    line-height: 1.55;
}

.arama-modal-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;

    margin-top: 20px;
}

.arama-modal-actions button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    min-height: 44px;
    padding: 10px;

    border-radius: 14px;

    font: inherit;
    font-size: 10.5px;
    font-weight: 600;

    cursor: pointer;
}

.arama-modal-vazgec {
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: transparent;
    color: #ffffff;
}

.arama-modal-onay {
    border: 1px solid #ef4444;
    background: #ef4444;
    color: #ffffff;
}

.arama-modal-onay:disabled {
    cursor: wait;
    opacity: 0.65;
}

/* =========================================================
   TOAST
========================================================= */

.arama-toast-alani {
    position: fixed;
    z-index: 1900;
    right: 22px;
    bottom: 22px;

    display: flex;
    flex-direction: column;
    gap: 9px;

    pointer-events: none;
}

.arama-toast {
    display: flex;
    align-items: center;
    gap: 9px;

    min-width: 250px;
    max-width: 380px;
    padding: 12px 14px;

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;

    background: #202020;
    color: #ffffff;

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

    opacity: 0;
    transform: translateY(12px);

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.3);

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}

.arama-toast.goster {
    opacity: 1;
    transform: translateY(0);
}

.arama-toast.success i {
    color: #22c55e;
}

.arama-toast.warning i {
    color: #f59e0b;
}

.arama-toast.error i {
    color: #ef4444;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 760px) {
    .arama-kategori-listesi {
        display: flex;
        overflow-x: auto;

        padding-bottom: 3px;

        scrollbar-width: none;
    }

    .arama-kategori-listesi::-webkit-scrollbar {
        display: none;
    }

    .arama-kategori {
        flex: 0 0 75px;
    }
}

@media (max-width: 600px) {
    .arama-sayfasi {
        padding-bottom: 110px;
    }

    .arama-ust-alan,
    .arama-sonuc-bolumu {
        padding: 15px;
        border-radius: 19px;
    }

    .arama-form {
        gap: 8px;
    }

    .arama-gonder {
        min-width: 52px;
        width: 52px;
        padding: 0;
    }

    .arama-gonder span {
        display: none;
    }

    .arama-sonuc-baslik-satiri {
        align-items: flex-start;
    }

    .arama-gecmisi-temizle span {
        display: none;
    }

    .arama-gecmisi-temizle {
        width: 38px;
        padding: 0;
    }

    .arama-kart-ok {
        display: none;
    }

    .arama-toast-alani {
        right: 14px;
        bottom: 76px;
        left: 14px;
    }

    .arama-toast {
        width: 100%;
        min-width: 0;
        max-width: none;
    }
}

@media (max-width: 430px) {
    .arama-sonuc-karti {
        gap: 10px;
        min-height: 70px;
    }

    .arama-kart-gorsel {
        width: 52px;
        height: 52px;
    }

    .arama-kart-sag {
        gap: 3px;
    }

    .arama-takip-rozeti {
        display: none;
    }

    .arama-modal-actions {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   KEŞFET SAYFASI — KOYU TEMA
========================================================= */

.kesfet-sayfasi {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.kesfet-sayfasi [hidden] {
    display: none !important;
}

.kesfet-page-header {
    margin-bottom: 16px;
}

.kesfet-harita-alani {
    position: relative;

    width: 100%;
    height: calc(100vh - 210px);
    min-height: 590px;
    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 26px;

    background: #2f2f2f;

    box-shadow:
        0 20px 55px rgba(0, 0, 0, 0.25);
}

.kesfet-harita {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;
}

/* =========================================================
   KATEGORİ PANELİ
========================================================= */

.kesfet-kategori-paneli {
    position: absolute;
    z-index: 20;
    top: 12px;
    right: 12px;
    left: 12px;

    display: grid;
    grid-template-columns: repeat(6, minmax(70px, 1fr));
    gap: 8px;

    padding: 11px;

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;

    background: #050505;
    backdrop-filter: blur(15px);

    box-shadow:
        0 14px 34px rgba(0, 0, 0, 0.26);
}

.kesfet-kategori {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 6px;

    min-width: 0;
    padding: 0;

    border: 0;

    background: transparent;

    font: inherit;

    cursor: pointer;
}

.kesfet-kategori-ikon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.72);

    font-size: 18px;

    transition:
        transform 0.18s ease,
        background-color 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease;
}

.kesfet-kategori:hover
.kesfet-kategori-ikon {
    transform: translateY(-2px);

    border-color: rgba(255, 255, 255, 0.2);
}

.kesfet-kategori-yazi {
    overflow: hidden;

    width: 100%;

    color: rgba(255, 255, 255, 0.7);

    font-size: 9.5px;
    font-weight: 600;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kesfet-kategori.aktif
.kesfet-kategori-ikon {
    border-color: #050505;
    background: #2f2f2f;
    color: #ffffff;
}

.kesfet-kategori.aktif
.kesfet-kategori-yazi {
    color: #ffffff;
    font-weight: 600;
}

/* =========================================================
   KONUM BUTONU
========================================================= */

.kesfet-konumuma-git {
    position: absolute;
    z-index: 22;
    right: 16px;
    bottom: 22px;

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

    width: 48px;
    height: 48px;
    padding: 0;

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 15px;

    background: rgba(47, 47, 47, 0.96);
    color: #60a5fa;

    font-size: 18px;

    cursor: pointer;

    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.28);

    transition:
        transform 0.18s ease,
        opacity 0.18s ease;
}

.kesfet-konumuma-git:hover {
    transform: translateY(-2px);
}

.kesfet-konumuma-git.yukleniyor {
    cursor: wait;
    opacity: 0.55;
}

/* =========================================================
   YÜKLENİYOR
========================================================= */

.kesfet-yukleniyor {
    position: absolute;
    z-index: 35;
    inset: 0;

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

    background: rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(2px);
}

.kesfet-yukleniyor-karti {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 13px;

    min-width: 230px;
    padding: 21px 24px;

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 21px;

    background: rgba(47, 47, 47, 0.96);
    color: #ffffff;

    box-shadow:
        0 22px 55px rgba(0, 0, 0, 0.36);
}

.kesfet-yukleniyor-karti strong {
    font-size: 11.5px;
    font-weight: 600;
    text-align: center;
}

.kesfet-spinner {
    display: inline-block;

    width: 29px;
    height: 29px;

    border: 3px solid rgba(255, 255, 255, 0.16);
    border-top-color: #8a8a8a;
    border-radius: 50%;

    animation: kesfet-don 0.75s linear infinite;
}

@keyframes kesfet-don {
    to {
        transform: rotate(360deg);
    }
}

/* =========================================================
   BİLGİ / MESAJ
========================================================= */

.kesfet-harita-bilgi {
    position: absolute;
    z-index: 24;
    top: 118px;
    left: 50%;

    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 9px 13px;

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;

    background: rgba(47, 47, 47, 0.96);
    color: #ffffff;

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

    transform: translateX(-50%);

    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.27);
}

.kesfet-harita-bilgi i {
    color: #f97316;
}

.kesfet-mesaj-kutusu {
    position: absolute;
    z-index: 25;
    right: 85px;
    bottom: 22px;
    left: 18px;

    display: flex;
    align-items: center;
    gap: 10px;

    min-height: 48px;
    padding: 12px 14px;

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;

    background: rgba(47, 47, 47, 0.96);
    color: rgba(255, 255, 255, 0.7);

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

    box-shadow:
        0 14px 36px rgba(0, 0, 0, 0.28);
}

.kesfet-mesaj-kutusu > i {
    color: #f97316;
}

.kesfet-mesaj-kutusu span {
    flex: 1;
}

.kesfet-mesaj-kutusu button {
    flex: 0 0 auto;

    padding: 7px 10px;

    border: 0;
    border-radius: 9px;

    background: #050505;
    color: #ffffff;

    font: inherit;
    font-size: 9px;
    font-weight: 600;

    cursor: pointer;
}

/* =========================================================
   MEKÂN KARTI
========================================================= */

.kesfet-mekan-karti {
    position: absolute;
    z-index: 30;
    right: 76px;
    bottom: 20px;
    left: 16px;

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

    min-height: 84px;
    padding: 7px 47px 7px 7px;

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 22px;
    outline: none;

    background: rgba(47, 47, 47, 0.97);

    cursor: pointer;

    box-shadow:
        0 18px 48px rgba(0, 0, 0, 0.37);

    transition:
        transform 0.18s ease,
        border-color 0.18s ease;
}

.kesfet-mekan-karti:hover,
.kesfet-mekan-karti:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.24);
}

.kesfet-kart-kapat {
    position: absolute;
    z-index: 3;
    top: 8px;
    right: 8px;

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

    width: 28px;
    height: 28px;
    padding: 0;

    border: 0;
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.6);

    cursor: pointer;
}

.kesfet-kart-gorsel {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 68px;
    height: 68px;
    overflow: hidden;

    border-radius: 17px;

    background: #ffffff;
    color: #2f2f2f;

    font-size: 27px;
}

.kesfet-kart-gorsel img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.kesfet-kart-gorsel > span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;
}

.kesfet-kart-icerik {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 4px;

    min-width: 0;
}

.kesfet-kart-baslik-satiri {
    display: flex;
    align-items: center;
    gap: 8px;
}

.kesfet-kart-baslik-satiri strong {
    overflow: hidden;

    flex: 1;

    color: #ffffff;

    font-size: 13.5px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kesfet-takip-rozeti {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 21px;
    height: 21px;

    border-radius: 50%;

    background: #22c55e;
    color: #ffffff;

    font-size: 9px;
}

.kesfet-kart-adres {
    overflow: hidden;

    color: rgba(255, 255, 255, 0.68);

    font-size: 10.5px;
    font-weight: 550;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kesfet-kart-alt {
    display: flex;
    align-items: center;
    gap: 8px;

    margin-top: 3px;
}

.kesfet-kart-rozetler {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 1;
    flex-wrap: wrap;
}

.kesfet-hsp-rozeti {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 20px;
    padding: 3px 7px;

    border-radius: 999px;

    color: #ffffff;

    font-size: 8.5px;
    font-weight: 600;
}

.kesfet-hsp-rozeti.cok-uygun {
    background: #5fa85a;
}

.kesfet-hsp-rozeti.uygun {
    background: #3f5f14;
}

.kesfet-hsp-rozeti.pahali {
    background: #c8172d;
}

.kesfet-hsp-rozeti.cok-pahali {
    background: #850015;
}

.kesfet-hsp-rozeti.varsayilan {
    background: rgba(255, 255, 255, 0.18);
}

.kesfet-rating,
.kesfet-mesafe {
    display: inline-flex;
    align-items: center;
    gap: 4px;

    font-size: 9.5px;
    font-weight: 600;
}

.kesfet-rating {
    color: #f59e0b;
}

.kesfet-mesafe {
    color: rgba(255, 255, 255, 0.55);
}

.kesfet-kart-ok {
    color: rgba(255, 255, 255, 0.42);
    font-size: 12px;
}

/* =========================================================
   ÖZEL GOOGLE MARKER
========================================================= */

.kesfet-ozel-marker {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;
    padding: 0;

    border: 2px solid #ffffff;
    border-radius: 50%;

    background: var(--marker-renk);
    color: #ffffff;

    cursor: pointer;

    box-shadow:
        0 5px 13px rgba(0, 0, 0, 0.36);

    transform-origin: center bottom;

    transition: transform 0.16s ease;
}

.kesfet-ozel-marker:hover {
    transform: scale(1.16);
}

.kesfet-ozel-marker-ic {
    font-size: 16px;
    line-height: 1;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 800px) {
    .kesfet-harita-alani {
        height: calc(100vh - 185px);
        min-height: 580px;
    }

    .kesfet-kategori-paneli {
        display: flex;
        overflow-x: auto;

        scrollbar-width: none;
    }

    .kesfet-kategori-paneli::-webkit-scrollbar {
        display: none;
    }

    .kesfet-kategori {
        flex: 0 0 70px;
    }
}

@media (max-width: 600px) {
    .kesfet-page-header {
        margin-bottom: 10px;
    }

    .kesfet-harita-alani {
        height: calc(100vh - 150px);
        min-height: 560px;
        border-radius: 20px;
    }

    .kesfet-kategori-paneli {
        top: 8px;
        right: 8px;
        left: 8px;

        padding: 9px 6px;

        border-radius: 20px;
    }

    .kesfet-kategori {
        flex-basis: 63px;
    }

    .kesfet-kategori-ikon {
        width: 41px;
        height: 41px;

        font-size: 16px;
    }

    .kesfet-konumuma-git {
        right: 12px;
        bottom: 14px;

        width: 44px;
        height: 44px;
    }

    .kesfet-mekan-karti {
        right: 62px;
        bottom: 13px;
        left: 10px;

        min-height: 78px;
        padding-right: 39px;

        border-radius: 19px;
    }

    .kesfet-kart-gorsel {
        width: 62px;
        height: 62px;
    }

    .kesfet-mesaj-kutusu {
        right: 63px;
        bottom: 13px;
        left: 10px;
    }

    .kesfet-harita-bilgi {
        top: 108px;

        max-width: calc(100% - 30px);

        white-space: nowrap;
    }
}

.mail-dogrulama-sayfasi {
    min-height: calc(100vh - 70px);
    padding: 34px 24px 120px;

    background: #050505;

    color: #ffffff;

    font-family:
        "Montserrat",
        Arial,
        sans-serif;
}

.mail-dogrulama-sayfasi *,
.mail-dogrulama-sayfasi *::before,
.mail-dogrulama-sayfasi *::after {
    box-sizing: border-box;
}

.mail-dogrulama-kapsayici {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
}

.mail-page-header {
    margin-bottom: 24px;
}

.mail-page-header-icerik {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.mail-page-rozet {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    min-height: 32px;
    margin-bottom: 14px;
    padding: 7px 12px;

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;

    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.72);

    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.03em;
}

.mail-page-rozet i {
    color: #f59e0b;
}

.mail-page-baslik {
    margin: 0;

    color: #ffffff;

    font-size: clamp(25px, 4vw, 36px);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.04em;
}

.mail-page-aciklama {
    margin: 9px 0 0;

    color: rgba(255, 255, 255, 0.62);

    font-size: 13px;
    font-weight: 500;
    line-height: 1.6;
}

.mail-profil-karti,
.mail-islem-karti,
.mail-onaylandi-karti {
    width: 100%;

    border: 1px solid rgba(102, 102, 102, 0.62);
    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            rgba(102, 102, 102, 0.16),
            rgba(102, 102, 102, 0.07)
        ),
        #101010;

    box-shadow:
        0 22px 55px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.mail-profil-karti {
    padding: 21px;
}

.mail-profil-karti-ust {
    display: flex;
    align-items: center;
    gap: 13px;
}

.mail-profil-ikon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;

    width: 47px;
    height: 47px;

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;

    background: rgba(255, 255, 255, 0.07);
    color: #ffffff;

    font-size: 18px;
}

.mail-profil-baslik-grubu {
    min-width: 0;
}

.mail-profil-etiket {
    display: block;
    margin-bottom: 4px;

    color: rgba(255, 255, 255, 0.54);

    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.mail-profil-baslik-grubu h2 {
    margin: 0;

    color: #ffffff;

    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
}

.mail-ilerleme-alani {
    margin-top: 20px;
}

.mail-ilerleme-baslik {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    margin-bottom: 9px;

    color: rgba(255, 255, 255, 0.66);

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

.mail-ilerleme-baslik strong {
    color: #ffffff;
    font-size: 12px;
}

.mail-ilerleme-cubugu {
    width: 100%;
    height: 8px;

    overflow: hidden;

    border-radius: 999px;

    background: rgba(255, 255, 255, 0.08);
}

.mail-ilerleme-cubugu span {
    display: block;
    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #050505,
            #a3a3a3
        );

    box-shadow: 0 0 16px rgba(163, 163, 163, 0.25);

    transition: width 0.4s ease;
}

.mail-profil-bilgi {
    margin: 17px 0 0;

    color: rgba(255, 255, 255, 0.74);

    font-size: 12px;
    font-weight: 500;
    line-height: 1.65;
}

.mail-adres-kutusu {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-top: 18px;
    padding: 13px 14px;

    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 16px;

    background: rgba(0, 0, 0, 0.22);
}

.mail-adres-ikon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;

    width: 38px;
    height: 38px;

    border-radius: 12px;

    background: rgba(255, 255, 255, 0.08);
    color: #d4d4d4;
}

.mail-adres-icerik {
    flex: 1;
    min-width: 0;
}

.mail-adres-icerik span {
    display: block;
    margin-bottom: 3px;

    color: rgba(255, 255, 255, 0.46);

    font-size: 9.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.mail-adres-icerik strong {
    display: block;
    overflow: hidden;

    color: #ffffff;

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

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

.mail-bekliyor-rozeti {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;

    padding: 6px 9px;

    border: 1px solid rgba(245, 158, 11, 0.24);
    border-radius: 999px;

    background: rgba(245, 158, 11, 0.1);
    color: #fbbf24;

    font-size: 9.5px;
    font-weight: 600;
}

.mail-islem-karti {
    margin-top: 18px;
    padding: 21px;
}

.mail-islem-baslik {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    margin-bottom: 19px;
}

.mail-adim-numarasi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;

    width: 35px;
    height: 35px;

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 11px;

    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;

    font-size: 13px;
    font-weight: 600;
}

.mail-islem-baslik h2 {
    margin: 0;

    color: #ffffff;

    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
}

.mail-islem-baslik p {
    margin: 5px 0 0;

    color: rgba(255, 255, 255, 0.54);

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

.mail-ana-buton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    width: 100%;
    min-height: 48px;
    padding: 11px 17px;

    border: 1px solid #ffffff;
    border-radius: 16px;

    background: #ffffff;
    color: #2f2f2f;

    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;

    text-decoration: none;

    cursor: pointer;

    transition:
        transform 0.18s ease,
        background-color 0.18s ease,
        color 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        opacity 0.18s ease;
}

.mail-ana-buton:hover {
    transform: translateY(-1px);

    background: #e8e8e8;
    border-color: #e8e8e8;

    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.24);
}

.mail-ana-buton:active {
    transform: translateY(0);
}

.mail-ana-buton:disabled {
    opacity: 0.62;
    cursor: not-allowed;
    transform: none;
}

.mail-ana-buton.tamamlandi {
    border-color: #22c55e;
    background: #22c55e;
    color: #ffffff;
}

.mail-buton-normal,
.mail-buton-yukleniyor {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
}

.mail-buton-normal[hidden],
.mail-buton-yukleniyor[hidden] {
    display: none;
}

.mail-atla-buton {
    display: block;
    width: fit-content;

    margin: 14px auto 0;
    padding: 6px;

    color: rgba(255, 255, 255, 0.54);

    font-size: 11px;
    font-weight: 600;
    text-decoration: none;

    transition: color 0.18s ease;
}

.mail-atla-buton:hover {
    color: #ffffff;
}

.mail-kod-alani[hidden] {
    display: none;
}

.mail-spam-uyarisi {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    margin-top: 18px;
    padding: 14px 15px;

    border: 1px solid rgba(245, 158, 11, 0.26);
    border-radius: 15px;

    background: rgba(245, 158, 11, 0.09);
}

.mail-spam-ikon {
    flex: 0 0 auto;

    color: #f59e0b;
    font-size: 16px;
    line-height: 1;
}

.mail-spam-uyarisi p {
    margin: 0;

    color: #fcd58a;

    font-size: 10.5px;
    font-weight: 550;
    line-height: 1.55;
}

.mail-spam-uyarisi strong {
    color: #fbbf24;
}

.mail-kod-karti {
    margin-top: 14px;
}

.mail-kod-kutulari {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;

    width: 100%;
    max-width: 390px;
    margin: 0 auto;
}

.mail-kod-input {
    width: 100%;
    min-width: 0;
    height: 68px;
    padding: 0;

    border: 2px solid transparent;
    border-radius: 17px;
    outline: none;

    background: #ffffff;
    color: #2f2f2f;

    font-family: inherit;
    font-size: 22px;
    font-weight: 600;
    line-height: 1;
    text-align: center;

    caret-color: #2f2f2f;

    transition:
        transform 0.16s ease,
        border-color 0.16s ease,
        box-shadow 0.16s ease,
        background-color 0.16s ease;
}

.mail-kod-input:hover {
    background: #f5f5f5;
}

.mail-kod-input:focus {
    transform: translateY(-2px);

    border-color: #050505;

    box-shadow:
        0 0 0 4px rgba(102, 102, 102, 0.22),
        0 12px 24px rgba(0, 0, 0, 0.24);
}

.mail-kod-input.dolu {
    border-color: #8c8c8c;
}

.mail-kod-input.hata {
    border-color: #ef4444;

    box-shadow:
        0 0 0 4px rgba(239, 68, 68, 0.14);
}

.mail-kod-input:disabled {
    opacity: 0.7;
}

.mail-kod-yardim {
    margin: 11px 0 17px;

    color: rgba(255, 255, 255, 0.42);

    font-size: 9.5px;
    font-weight: 550;
    text-align: center;
}

.mail-spinner {
    width: 18px;
    height: 18px;

    border: 2px solid rgba(47, 47, 47, 0.25);
    border-top-color: #2f2f2f;
    border-radius: 50%;

    animation: mail-spinner-don 0.75s linear infinite;
}

.mail-bildirim {
    position: fixed;
    z-index: 9999;
    right: 25px;
    bottom: 25px;

    display: flex;
    align-items: center;
    gap: 11px;

    width: min(390px, calc(100vw - 32px));
    min-height: 54px;
    padding: 12px 13px;

    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 16px;

    background: #171717;
    color: #ffffff;

    box-shadow:
        0 22px 45px rgba(0, 0, 0, 0.42);

    animation: mail-bildirim-giris 0.22s ease;
}

.mail-bildirim[hidden] {
    display: none;
}

.mail-bildirim-ikon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;

    width: 31px;
    height: 31px;

    border-radius: 10px;

    background: rgba(255, 255, 255, 0.08);
}

.mail-bildirim > span {
    flex: 1;

    font-size: 11px;
    font-weight: 600;
    line-height: 1.45;
}

.mail-bildirim button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;

    width: 30px;
    height: 30px;
    padding: 0;

    border: 0;
    border-radius: 9px;

    background: transparent;
    color: rgba(255, 255, 255, 0.58);

    cursor: pointer;
}

.mail-bildirim button:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.mail-bildirim.basarili {
    border-color: rgba(34, 197, 94, 0.4);
}

.mail-bildirim.basarili .mail-bildirim-ikon {
    background: rgba(34, 197, 94, 0.14);
    color: #4ade80;
}

.mail-bildirim.hata {
    border-color: rgba(239, 68, 68, 0.42);
}

.mail-bildirim.hata .mail-bildirim-ikon {
    background: rgba(239, 68, 68, 0.14);
    color: #f87171;
}

.mail-bildirim.uyari {
    border-color: rgba(245, 158, 11, 0.42);
}

.mail-bildirim.uyari .mail-bildirim-ikon {
    background: rgba(245, 158, 11, 0.14);
    color: #fbbf24;
}

.mail-onaylandi-karti {
    display: flex;
    flex-direction: column;
    align-items: center;

    padding: 38px 25px;

    text-align: center;
}

.mail-onaylandi-ikon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 74px;
    height: 74px;

    border: 1px solid rgba(34, 197, 94, 0.28);
    border-radius: 24px;

    background: rgba(34, 197, 94, 0.1);
    color: #4ade80;

    font-size: 31px;
}

.mail-onaylandi-icerik {
    margin: 19px 0 22px;
}

.mail-onaylandi-etiket {
    display: block;
    margin-bottom: 7px;

    color: #4ade80;

    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.mail-onaylandi-icerik h2 {
    margin: 0;

    color: #ffffff;

    font-size: 21px;
    font-weight: 600;
}

.mail-onaylandi-icerik p {
    margin: 9px 0 12px;

    color: rgba(255, 255, 255, 0.6);

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

.mail-onaylandi-icerik strong {
    color: #ffffff;

    font-size: 12px;
    word-break: break-word;
}

@keyframes mail-spinner-don {
    to {
        transform: rotate(360deg);
    }
}

@keyframes mail-bildirim-giris {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 650px) {
    .mail-dogrulama-sayfasi {
        min-height: 100vh;
        padding: 24px 14px 100px;
    }

    .mail-page-header {
        margin-bottom: 19px;
    }

    .mail-page-baslik {
        font-size: 25px;
    }

    .mail-profil-karti,
    .mail-islem-karti {
        padding: 17px;
        border-radius: 19px;
    }

    .mail-adres-kutusu {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .mail-adres-icerik {
        width: calc(100% - 52px);
    }

    .mail-bekliyor-rozeti {
        margin-left: 50px;
    }

    .mail-kod-kutulari {
        gap: 8px;
    }

    .mail-kod-input {
        height: 59px;
        border-radius: 14px;
        font-size: 20px;
    }

    .mail-bildirim {
        right: 16px;
        bottom: 16px;
    }
}

body.profil-modal-acik {
    overflow: hidden;
}

.profil-resim-sayfasi {
    min-height: calc(100vh - 70px);
    padding: 34px 24px 120px;

    background:
        #050505;

    color: #ffffff;

    font-family:
        "Montserrat",
        Arial,
        sans-serif;
}

.profil-resim-sayfasi *,
.profil-resim-sayfasi *::before,
.profil-resim-sayfasi *::after {
    box-sizing: border-box;
}

.profil-resim-kapsayici {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
}

.profil-resim-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    margin-bottom: 22px;
}

.profil-resim-rozet {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    min-height: 32px;
    margin-bottom: 14px;
    padding: 7px 12px;

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;

    background: rgba(255, 255, 255, 0.045);
    color: rgba(255, 255, 255, 0.7);

    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.03em;
}

.profil-resim-rozet i {
    color: #f59e0b;
}

.profil-resim-baslik {
    margin: 0;

    color: #ffffff;

    font-size: clamp(25px, 4vw, 36px);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.04em;
}

.profil-resim-aciklama {
    margin: 8px 0 0;

    color: rgba(255, 255, 255, 0.6);

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

.profil-tamamlama-karti,
.profil-resim-karti {
    width: 100%;

    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 22px;

    background: #0d0d0d;

    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.profil-tamamlama-karti {
    margin-bottom: 18px;
    padding: 20px;
}

.profil-tamamlama-ust {
    display: flex;
    align-items: center;
    gap: 13px;
}

.profil-tamamlama-ikon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;

    width: 46px;
    height: 46px;

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;

    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;

    font-size: 18px;
}

.profil-tamamlama-baslik-grubu {
    min-width: 0;
}

.profil-tamamlama-baslik-grubu > span {
    display: block;
    margin-bottom: 4px;

    color: rgba(255, 255, 255, 0.44);

    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.profil-tamamlama-baslik-grubu h2 {
    margin: 0;

    color: #ffffff;

    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
}

.profil-ilerleme-baslik {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    margin-top: 19px;
    margin-bottom: 8px;

    color: rgba(255, 255, 255, 0.58);

    font-size: 10.5px;
    font-weight: 600;
}

.profil-ilerleme-baslik strong {
    color: #ffffff;
    font-size: 11px;
}

.profil-ilerleme-cubugu {
    width: 100%;
    height: 8px;

    overflow: hidden;

    border-radius: 999px;

    background: rgba(255, 255, 255, 0.075);
}

.profil-ilerleme-cubugu span {
    display: block;
    height: 100%;

    border-radius: inherit;

    background: linear-gradient(
        90deg,
        #050505,
        #b5b5b5
    );

    transition: width 0.35s ease;
}

.profil-tamamlama-metin {
    margin: 15px 0 0;

    color: rgba(255, 255, 255, 0.68);

    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.6;
}

.profil-resim-karti {
    padding: 24px;
}

.profil-onizleme-bolumu {
    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;
}

.profil-resim-onizleme {
    position: relative;

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

    width: 158px;
    height: 158px;
    padding: 0;

    overflow: visible;

    border: 5px solid #ffffff;
    border-radius: 50%;
    outline: none;

    background: #ffffff;

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.42),
        0 0 0 1px rgba(255, 255, 255, 0.12);

    cursor: pointer;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.profil-resim-onizleme:hover {
    transform: translateY(-3px);

    box-shadow:
        0 25px 55px rgba(0, 0, 0, 0.48),
        0 0 0 4px rgba(255, 255, 255, 0.06);
}

.profil-resim-onizleme img {
    display: block;

    width: 100%;
    height: 100%;

    border-radius: 50%;

    object-fit: cover;
}

.profil-resim-onizleme img[hidden],
.profil-resim-bos[hidden] {
    display: none;
}

.profil-resim-bos {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;

    width: 100%;
    height: 100%;

    border-radius: 50%;

    color: #2f2f2f;
}

.profil-resim-bos i {
    font-size: 34px;
}

.profil-resim-bos span {
    font-size: 11px;
    font-weight: 600;
}

.profil-resim-duzenle-rozeti {
    position: absolute;
    right: 2px;
    bottom: 5px;

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

    width: 38px;
    height: 38px;

    border: 4px solid #0d0d0d;
    border-radius: 50%;

    background: #2f2f2f;
    color: #ffffff;

    font-size: 13px;

    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.38);
}

.profil-onizleme-bolumu h2 {
    margin: 20px 0 0;

    color: #ffffff;

    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
}

.profil-onizleme-bolumu p {
    max-width: 470px;
    margin: 7px 0 0;

    color: rgba(255, 255, 255, 0.52);

    font-size: 10.5px;
    font-weight: 500;
    line-height: 1.55;
}

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

    margin-top: 22px;
}

.profil-resim-islemleri .profil-ikincil-buton:only-child {
    grid-column: 1 / -1;
}

.profil-ikincil-buton,
.profil-sil-buton,
.profil-ana-buton,
.profil-sil-onay-buton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-height: 46px;
    padding: 10px 16px;

    border-radius: 15px;

    font-family: inherit;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1;

    cursor: pointer;

    transition:
        transform 0.17s ease,
        background-color 0.17s ease,
        border-color 0.17s ease,
        color 0.17s ease,
        opacity 0.17s ease,
        box-shadow 0.17s ease;
}

.profil-ikincil-buton {
    border: 1px solid rgba(255, 255, 255, 0.55);

    background: transparent;
    color: #ffffff;
}

.profil-ikincil-buton:hover {
    transform: translateY(-1px);

    border-color: #ffffff;
    background: rgba(255, 255, 255, 0.06);
}

.profil-sil-buton {
    border: 1px solid rgba(248, 113, 113, 0.72);

    background: rgba(239, 68, 68, 0.05);
    color: #f87171;
}

.profil-sil-buton:hover {
    transform: translateY(-1px);

    border-color: #f87171;
    background: rgba(239, 68, 68, 0.12);
}

.profil-sil-buton[hidden] {
    display: none;
}

.profil-ana-buton {
    width: 100%;
    margin-top: 18px;

    border: 1px solid #ffffff;

    background: #ffffff;
    color: #2f2f2f;
}

.profil-ana-buton:hover:not(:disabled) {
    transform: translateY(-1px);

    border-color: #e7e7e7;
    background: #e7e7e7;

    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28);
}

.profil-ana-buton:disabled,
.profil-ikincil-buton:disabled,
.profil-sil-buton:disabled,
.profil-sil-onay-buton:disabled {
    opacity: 0.48;
    cursor: not-allowed;
    transform: none;
}

.profil-geri-buton {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 44px;
    margin-top: 12px;

    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 14px;

    color: rgba(255, 255, 255, 0.72);

    font-size: 11.5px;
    font-weight: 600;
    text-decoration: none;

    transition:
        color 0.17s ease,
        border-color 0.17s ease,
        background-color 0.17s ease;
}

.profil-geri-buton:hover {
    border-color: rgba(255, 255, 255, 0.58);

    background: rgba(255, 255, 255, 0.04);
    color: #ffffff;
}

.buton-normal,
.buton-yukleniyor {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.buton-normal[hidden],
.buton-yukleniyor[hidden] {
    display: none;
}

.profil-spinner {
    width: 18px;
    height: 18px;

    border: 2px solid rgba(47, 47, 47, 0.22);
    border-top-color: #2f2f2f;
    border-radius: 50%;

    animation: profil-spinner-don 0.7s linear infinite;
}

.profil-spinner-beyaz {
    border-color: rgba(255, 255, 255, 0.3);
    border-top-color: #ffffff;
}

.profil-modal {
    position: fixed;
    z-index: 10000;
    inset: 0;

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

    padding: 20px;
}

.profil-modal[hidden] {
    display: none;
}

.profil-modal-arka-plan {
    position: absolute;
    inset: 0;

    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(7px);
}

.profil-modal-kutu {
    position: relative;
    z-index: 1;

    width: min(100%, 470px);
    padding: 25px;

    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 22px;

    background: #101010;
    color: #ffffff;

    box-shadow: 0 35px 90px rgba(0, 0, 0, 0.65);

    animation: profil-modal-giris 0.2s ease;
}

.profil-modal-kapat {
    position: absolute;
    top: 14px;
    right: 14px;

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

    width: 35px;
    height: 35px;
    padding: 0;

    border: 0;
    border-radius: 11px;

    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.68);

    cursor: pointer;
}

.profil-modal-kapat:hover {
    background: rgba(255, 255, 255, 0.11);
    color: #ffffff;
}

.profil-modal-ikon,
.profil-sil-modal-ikon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 58px;
    height: 58px;
    margin: 0 auto 15px;

    border-radius: 18px;

    background: rgba(255, 255, 255, 0.07);
    color: #ffffff;

    font-size: 23px;
}

.profil-sil-modal-ikon {
    background: rgba(239, 68, 68, 0.12);
    color: #f87171;
}

.profil-kaynak-modal-kutu,
.profil-sil-modal-kutu {
    text-align: center;
}

.profil-modal-kutu h2 {
    margin: 0;

    color: #ffffff;

    font-size: 19px;
    font-weight: 600;
    line-height: 1.35;
}

.profil-modal-kutu > p {
    margin: 9px 0 20px;

    color: rgba(255, 255, 255, 0.58);

    font-size: 11px;
    font-weight: 500;
    line-height: 1.6;
}

.profil-modal-kutu .profil-ana-buton {
    margin-top: 0;
}

.profil-modal-vazgec {
    width: 100%;
    margin-top: 11px;
}

.profil-kirpma-modal-kutu {
    width: min(100%, 720px);
    padding: 20px;
}

.profil-kirpma-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.profil-kirpma-header span {
    display: block;
    margin-bottom: 4px;

    color: rgba(255, 255, 255, 0.42);

    font-size: 9.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.profil-kirpma-header .profil-modal-kapat {
    position: static;
    flex: 0 0 auto;
}

.profil-kirpma-aciklama {
    margin: 9px 0 16px !important;
}

.profil-kirpma-alani {
    width: 100%;
    height: min(55vh, 500px);

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 16px;

    background: #050505;
}

.profil-kirpma-alani img {
    display: block;

    max-width: 100%;
}

.profil-kirpma-alt {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 10px;

    margin-top: 15px;
}

.profil-kirpma-alt .profil-ana-buton {
    margin-top: 0;
}

.profil-sil-onay-buton {
    width: 100%;

    border: 1px solid #ef4444;

    background: #ef4444;
    color: #ffffff;
}

.profil-sil-onay-buton:hover:not(:disabled) {
    transform: translateY(-1px);

    border-color: #dc2626;
    background: #dc2626;
}

.profil-bildirim {
    position: fixed;
    z-index: 11000;
    right: 24px;
    bottom: 24px;

    display: flex;
    align-items: center;
    gap: 11px;

    width: min(390px, calc(100vw - 32px));
    min-height: 54px;
    padding: 12px 13px;

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;

    background: #151515;
    color: #ffffff;

    box-shadow: 0 24px 55px rgba(0, 0, 0, 0.48);

    animation: profil-bildirim-giris 0.22s ease;
}

.profil-bildirim[hidden] {
    display: none;
}

.profil-bildirim-ikon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;

    width: 32px;
    height: 32px;

    border-radius: 10px;

    background: rgba(255, 255, 255, 0.07);
}

.profil-bildirim > span {
    flex: 1;

    font-size: 11px;
    font-weight: 600;
    line-height: 1.45;
}

.profil-bildirim button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 30px;
    height: 30px;
    padding: 0;

    border: 0;
    border-radius: 9px;

    background: transparent;
    color: rgba(255, 255, 255, 0.56);

    cursor: pointer;
}

.profil-bildirim button:hover {
    background: rgba(255, 255, 255, 0.07);
    color: #ffffff;
}

.profil-bildirim.basarili {
    border-color: rgba(34, 197, 94, 0.42);
}

.profil-bildirim.basarili .profil-bildirim-ikon {
    background: rgba(34, 197, 94, 0.13);
    color: #4ade80;
}

.profil-bildirim.hata {
    border-color: rgba(239, 68, 68, 0.42);
}

.profil-bildirim.hata .profil-bildirim-ikon {
    background: rgba(239, 68, 68, 0.13);
    color: #f87171;
}

.profil-bildirim.uyari {
    border-color: rgba(245, 158, 11, 0.42);
}

.profil-bildirim.uyari .profil-bildirim-ikon {
    background: rgba(245, 158, 11, 0.13);
    color: #fbbf24;
}

.cropper-view-box,
.cropper-face {
    border-radius: 50%;
}

.cropper-line,
.cropper-point {
    background-color: #ffffff;
}

.cropper-point {
    width: 9px;
    height: 9px;

    opacity: 1;
}

@keyframes profil-spinner-don {
    to {
        transform: rotate(360deg);
    }
}

@keyframes profil-modal-giris {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.985);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes profil-bildirim-giris {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 650px) {
    .profil-resim-sayfasi {
        min-height: 100vh;
        padding: 24px 14px 100px;
    }

    .profil-resim-baslik {
        font-size: 25px;
    }

    .profil-tamamlama-karti,
    .profil-resim-karti {
        border-radius: 19px;
    }

    .profil-tamamlama-karti {
        padding: 17px;
    }

    .profil-resim-karti {
        padding: 20px 16px;
    }

    .profil-resim-onizleme {
        width: 148px;
        height: 148px;
    }

    .profil-resim-islemleri {
        grid-template-columns: 1fr;
    }

    .profil-resim-islemleri > * {
        grid-column: 1;
    }

    .profil-modal {
        align-items: flex-end;
        padding: 14px;
    }

    .profil-modal-kutu {
        width: 100%;
        padding: 22px 17px;

        border-radius: 22px;
    }

    .profil-kirpma-modal-kutu {
        padding: 17px;
    }

    .profil-kirpma-alani {
        height: min(52vh, 440px);
    }

    .profil-kirpma-alt {
        grid-template-columns: 1fr;
    }

    .profil-bildirim {
        right: 16px;
        bottom: 16px;
    }
}

.hs-profile-completion {
    width: 80%;
    margin: 22px 0 0;
    padding: 20px;
    margin-left: 10%;
    margin-right: 10%;

    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 20px;

    background: #050505;
    color: #ffffff;

    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.28);
}

.hs-profile-completion *,
.hs-profile-completion *::before,
.hs-profile-completion *::after {
    box-sizing: border-box;
}

.hs-profile-completion-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.hs-profile-completion-heading {
    min-width: 0;
}

.hs-profile-completion-eyebrow {
    display: block;

    margin-bottom: 5px;

    color: rgba(255, 255, 255, 0.48);

    font-size: 10px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hs-profile-completion-title {
    margin: 0;

    color: #ffffff;

    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
}

.hs-profile-completion-description {
    max-width: 570px;
    margin: 7px 0 0;

    color: rgba(255, 255, 255, 0.62);

    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.55;
}

.hs-profile-completion-percent {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;

    min-width: 52px;
    height: 38px;
    padding: 0 12px;

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;

    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;

    font-size: 13px;
    font-weight: 600;
}

.hs-profile-completion-progress {
    width: 100%;
    height: 9px;
    margin-top: 18px;

    overflow: hidden;

    border-radius: 999px;

    background: rgba(255, 255, 255, 0.08);
}

.hs-profile-completion-progress-bar {
    display: block;

    height: 100%;
    min-width: 0;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #050505,
            #c4c4c4
        );

    box-shadow:
        0 0 16px rgba(255, 255, 255, 0.12);

    transition: width 0.35s ease;
}

.hs-profile-completion-items {
    display: flex;
    flex-direction: column;
    gap: 10px;

    margin-top: 18px;
}

.hs-profile-completion-item {
    display: grid;
    grid-template-columns:
        auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;

    padding: 14px;

    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 16px;

    background: #0d0d0d;
}

.hs-profile-completion-item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 13px;

    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
}

.hs-profile-completion-item-icon svg {
    width: 20px;
    height: 20px;
}

.hs-profile-completion-item-content {
    min-width: 0;
}

.hs-profile-completion-item-content h3 {
    margin: 0;

    color: #ffffff;

    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
}

.hs-profile-completion-item-content p {
    margin: 5px 0 0;

    color: rgba(255, 255, 255, 0.54);

    font-size: 10.5px;
    font-weight: 500;
    line-height: 1.5;
}

.hs-profile-completion-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    min-height: 39px;
    padding: 9px 13px;

    border: 1px solid #ffffff;
    border-radius: 12px;

    background: #ffffff;
    color: #2f2f2f;

    font-size: 10.5px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;

    transition:
        transform 0.17s ease,
        background-color 0.17s ease,
        border-color 0.17s ease;
}

.hs-profile-completion-action svg {
    width: 15px;
    height: 15px;
}

.hs-profile-completion-action:hover {
    transform: translateY(-1px);

    border-color: #e7e7e7;
    background: #e7e7e7;
}

@media (max-width: 700px) {
    .hs-profile-completion {
        margin-top: 18px;
        padding: 16px;

        border-radius: 18px;
    }

    .hs-profile-completion-header {
        gap: 12px;
    }

    .hs-profile-completion-title {
        font-size: 15px;
    }

    .hs-profile-completion-description {
        font-size: 10.5px;
    }

    .hs-profile-completion-percent {
        min-width: 48px;
        height: 35px;
        padding: 0 10px;

        font-size: 12px;
    }

    .hs-profile-completion-item {
        grid-template-columns:
            auto minmax(0, 1fr);
        align-items: start;
    }

    .hs-profile-completion-action {
        grid-column: 1 / -1;

        width: 100%;
        margin-top: 2px;
    }
}

.hs-help-page {
    min-height: calc(100vh - 70px);
    padding: 34px 24px 120px;

    background: #050505;

    color: #ffffff;

    font-family:
        "Montserrat",
        Arial,
        sans-serif;
}

.hs-help-page *,
.hs-help-page *::before,
.hs-help-page *::after {
    box-sizing: border-box;
}

.hs-help-container {
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
}

.hs-help-header {
    margin-bottom: 22px;
}

.hs-help-header-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    min-height: 32px;
    margin-bottom: 14px;
    padding: 7px 12px;

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;

    background: rgba(255, 255, 255, 0.045);
    color: rgba(255, 255, 255, 0.68);

    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.03em;
}

.hs-help-header-badge i {
    color: #f59e0b;
}

.hs-help-title {
    margin: 0;

    color: #ffffff;

    font-size: clamp(26px, 4vw, 37px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.04em;
}

.hs-help-description {
    max-width: 670px;
    margin: 9px 0 0;

    color: rgba(255, 255, 255, 0.58);

    font-size: 12px;
    font-weight: 500;
    line-height: 1.65;
}

.hs-help-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;

    min-height: 220px;

    color: rgba(255, 255, 255, 0.62);

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

.hs-help-loading[hidden],
.hs-help-content[hidden] {
    display: none;
}

.hs-help-spinner {
    width: 24px;
    height: 24px;

    border: 3px solid rgba(255, 255, 255, 0.12);
    border-top-color: #ffffff;
    border-radius: 50%;

    animation: hs-help-spin 0.75s linear infinite;
}

.hs-help-content {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.hs-help-intro-card,
.hs-help-card {
    width: 100%;

    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 20px;

    background: #0d0d0d;

    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.hs-help-intro-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;

    padding: 18px;
}

.hs-help-intro-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;

    width: 48px;
    height: 48px;

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;

    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;

    font-size: 19px;
}

.hs-help-intro-content {
    min-width: 0;
}

.hs-help-intro-content h2 {
    margin: 0;

    color: #ffffff;

    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
}

.hs-help-intro-content p {
    margin: 7px 0 0;

    color: rgba(255, 255, 255, 0.62);

    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.6;
}

.hs-help-card {
    padding: 19px;
}

.hs-help-card[hidden] {
    display: none;
}

.hs-help-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.hs-help-card-title-group {
    display: flex;
    align-items: center;
    gap: 12px;

    min-width: 0;
}

.hs-help-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;

    width: 42px;
    height: 42px;

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 13px;

    background: rgba(255, 255, 255, 0.055);
    color: #ffffff;

    font-size: 16px;
}

.hs-help-card-icon-warning {
    border-color: rgba(245, 158, 11, 0.22);

    background: rgba(245, 158, 11, 0.09);
    color: #fbbf24;
}

.hs-help-card-eyebrow {
    display: block;
    margin-bottom: 3px;

    color: rgba(255, 255, 255, 0.42);

    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.hs-help-card-title-group h2 {
    margin: 0;

    color: #ffffff;

    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
}

.hs-help-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;

    min-height: 31px;
    padding: 7px 11px;

    border: 1px solid rgba(245, 158, 11, 0.25);
    border-radius: 999px;

    background: rgba(245, 158, 11, 0.09);
    color: #fbbf24;

    font-size: 9.5px;
    font-weight: 600;
}

.hs-help-pending-details {
    display: flex;
    flex-direction: column;
    gap: 0;

    margin-top: 17px;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;

    background: #080808;
}

.hs-help-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    min-height: 45px;
    padding: 10px 13px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.hs-help-info-row:last-child {
    border-bottom: 0;
}

.hs-help-info-row span {
    color: rgba(255, 255, 255, 0.46);

    font-size: 10.5px;
    font-weight: 600;
}

.hs-help-info-row strong {
    color: #ffffff;

    font-size: 11px;
    font-weight: 600;
    text-align: right;
    overflow-wrap: anywhere;
}

.hs-help-pending-note {
    display: flex;
    align-items: flex-start;
    gap: 9px;

    margin-top: 13px;
    padding: 11px 12px;

    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 13px;

    background: rgba(255, 255, 255, 0.035);
    color: rgba(255, 255, 255, 0.56);

    font-size: 10.5px;
    font-weight: 550;
    line-height: 1.5;
}

.hs-help-pending-note i {
    margin-top: 2px;

    color: #fbbf24;
}

.hs-help-form {
    margin-top: 18px;
}

.hs-help-label {
    display: block;
    margin-bottom: 8px;

    color: rgba(255, 255, 255, 0.78);

    font-size: 10.5px;
    font-weight: 600;
}

.hs-help-textarea-wrapper {
    overflow: hidden;

    border: 1px solid rgba(102, 102, 102, 0.72);
    border-radius: 16px;

    background: rgba(0, 0, 0, 0.24);

    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}

.hs-help-textarea-wrapper:focus-within {
    border-color: #ffffff;

    box-shadow:
        0 0 0 3px rgba(255, 255, 255, 0.055);
}

.hs-help-textarea {
    display: block;

    width: 100%;
    min-height: 150px;
    padding: 14px;

    resize: vertical;

    border: 0;
    outline: none;

    background: transparent;
    color: #ffffff;

    font-family: inherit;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.6;
}

.hs-help-textarea::placeholder {
    color: rgba(255, 255, 255, 0.36);
}

.hs-help-textarea:disabled {
    opacity: 0.6;
    cursor: wait;
}

.hs-help-textarea-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    min-height: 37px;
    padding: 7px 12px;

    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.hs-help-form-message {
    color: rgba(255, 255, 255, 0.62);

    font-size: 9.5px;
    font-weight: 600;
    line-height: 1.4;
}

.hs-help-form-message[hidden] {
    display: none;
}

.hs-help-form-message.is-error {
    color: #f87171;
}

.hs-help-form-message.is-success {
    color: #4ade80;
}

.hs-help-character-count {
    flex: 0 0 auto;

    margin-left: auto;

    color: rgba(255, 255, 255, 0.38);

    font-size: 9px;
    font-weight: 600;
}

.hs-help-submit-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 46px;
    margin-top: 12px;
    padding: 10px 16px;

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

    background: #050505;
    color: #ffffff;

    font-family: inherit;
    font-size: 12px;
    font-weight: 600;

    cursor: pointer;

    transition:
        transform 0.17s ease,
        background-color 0.17s ease,
        border-color 0.17s ease,
        opacity 0.17s ease;
}

.hs-help-submit-button:hover:not(:disabled) {
    transform: translateY(-1px);

    border-color: #777777;
    background: #777777;
}

.hs-help-submit-button:disabled {
    opacity: 0.55;
    cursor: wait;
}

.hs-help-button-normal,
.hs-help-button-loading {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.hs-help-button-normal[hidden],
.hs-help-button-loading[hidden] {
    display: none;
}

.hs-help-button-spinner {
    width: 18px;
    height: 18px;

    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #ffffff;
    border-radius: 50%;

    animation: hs-help-spin 0.7s linear infinite;
}

.hs-help-faq-section {
    margin-top: 8px;
}

.hs-help-faq-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 15px;

    margin-bottom: 11px;
}

.hs-help-faq-eyebrow {
    display: block;
    margin-bottom: 4px;

    color: rgba(255, 255, 255, 0.4);

    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.hs-help-faq-header h2 {
    margin: 0;

    color: #ffffff;

    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
}

.hs-help-faq-count {
    color: rgba(255, 255, 255, 0.44);

    font-size: 9.5px;
    font-weight: 600;
}

.hs-help-faq-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hs-help-faq-item {
    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 17px;

    background: #0d0d0d;

    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16);

    transition:
        border-color 0.18s ease,
        background-color 0.18s ease;
}

.hs-help-faq-item.is-open {
    border-color: rgba(255, 255, 255, 0.19);
    background: #101010;
}

.hs-help-faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 13px;

    width: 100%;
    min-height: 56px;
    padding: 14px;

    border: 0;

    background: transparent;
    color: #ffffff;

    font-family: inherit;
    text-align: left;

    cursor: pointer;
}

.hs-help-faq-question-text {
    min-width: 0;

    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.45;
}

.hs-help-faq-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;

    width: 31px;
    height: 31px;

    border-radius: 10px;

    background: rgba(255, 255, 255, 0.055);
    color: rgba(255, 255, 255, 0.64);

    font-size: 11px;

    transition:
        transform 0.18s ease,
        background-color 0.18s ease;
}

.hs-help-faq-item.is-open .hs-help-faq-arrow {
    transform: rotate(180deg);
    background: rgba(255, 255, 255, 0.1);
}

.hs-help-faq-answer {
    padding: 0 14px 15px;
}

.hs-help-faq-answer[hidden] {
    display: none;
}

.hs-help-faq-answer p {
    margin: 0;
    padding-top: 12px;

    border-top: 1px solid rgba(255, 255, 255, 0.07);

    color: rgba(255, 255, 255, 0.62);

    font-size: 10.8px;
    font-weight: 500;
    line-height: 1.65;
    white-space: pre-line;
}

.hs-help-empty {
    display: flex;
    flex-direction: column;
    align-items: center;

    padding: 28px 18px;

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px;

    background: #0d0d0d;

    text-align: center;
}

.hs-help-empty[hidden] {
    display: none;
}

.hs-help-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 49px;
    height: 49px;

    border-radius: 15px;

    background: rgba(255, 255, 255, 0.055);
    color: rgba(255, 255, 255, 0.68);

    font-size: 19px;
}

.hs-help-empty h3 {
    margin: 13px 0 0;

    color: #ffffff;

    font-size: 13px;
    font-weight: 600;
}

.hs-help-empty p {
    margin: 6px 0 0;

    color: rgba(255, 255, 255, 0.48);

    font-size: 10.5px;
    font-weight: 500;
}

.hs-help-toast {
    position: fixed;
    z-index: 11000;
    right: 24px;
    bottom: 24px;

    display: flex;
    align-items: center;
    gap: 10px;

    width: min(390px, calc(100vw - 32px));
    min-height: 54px;
    padding: 11px 12px;

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 15px;

    background: #151515;
    color: #ffffff;

    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.45);
}

.hs-help-toast[hidden] {
    display: none;
}

.hs-help-toast-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;

    width: 32px;
    height: 32px;

    border-radius: 10px;

    background: rgba(255, 255, 255, 0.07);
}

.hs-help-toast-text {
    flex: 1;

    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.45;
}

.hs-help-toast-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 30px;
    height: 30px;
    padding: 0;

    border: 0;
    border-radius: 9px;

    background: transparent;
    color: rgba(255, 255, 255, 0.55);

    cursor: pointer;
}

.hs-help-toast-close:hover {
    background: rgba(255, 255, 255, 0.07);
    color: #ffffff;
}

.hs-help-toast.is-success {
    border-color: rgba(34, 197, 94, 0.4);
}

.hs-help-toast.is-success .hs-help-toast-icon {
    background: rgba(34, 197, 94, 0.12);
    color: #4ade80;
}

.hs-help-toast.is-error {
    border-color: rgba(239, 68, 68, 0.4);
}

.hs-help-toast.is-error .hs-help-toast-icon {
    background: rgba(239, 68, 68, 0.12);
    color: #f87171;
}

.hs-help-toast.is-warning {
    border-color: rgba(245, 158, 11, 0.4);
}

.hs-help-toast.is-warning .hs-help-toast-icon {
    background: rgba(245, 158, 11, 0.12);
    color: #fbbf24;
}

@keyframes hs-help-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 650px) {
    .hs-help-page {
        min-height: 100vh;
        padding: 24px 14px 100px;
    }

    .hs-help-title {
        font-size: 25px;
    }

    .hs-help-intro-card,
    .hs-help-card {
        border-radius: 18px;
    }

    .hs-help-intro-card {
        padding: 16px;
    }

    .hs-help-card {
        padding: 16px;
    }

    .hs-help-card-header {
        align-items: flex-start;
    }

    .hs-help-status-badge {
        min-height: 29px;
        padding: 6px 9px;
    }

    .hs-help-toast {
        right: 16px;
        bottom: 16px;
    }
}

@media (max-width: 470px) {
    .hs-help-intro-card {
        flex-direction: column;
    }

    .hs-help-card-header {
        flex-direction: column;
    }

    .hs-help-status-badge {
        align-self: flex-start;
    }

    .hs-help-info-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .hs-help-info-row strong {
        text-align: left;
    }
}

/* =========================================================
   İÇERİK DETAY SAYFASI — KOYU TEMA
========================================================= */

body {
    background: #050505;
}

.icerik-detay-page {
    --icerik-primary: #ff6b45;
    --icerik-primary-hover: #ff825f;

    --icerik-text: #f5f5f5;
    --icerik-text-soft: #c8c8c8;
    --icerik-muted: #929292;

    --icerik-page-bg: #050505;
    --icerik-card-bg: #101010;
    --icerik-soft-bg: #191919;
    --icerik-button-bg: #151515;
    --icerik-image-bg: #080808;
    --icerik-dropdown-bg: #151515;

    --icerik-border: #292929;
    --icerik-border-soft: #222222;

    --icerik-card-shadow:
        0 14px 42px rgba(0, 0, 0, 0.4);

    --icerik-dropdown-shadow:
        0 18px 48px rgba(0, 0, 0, 0.62);

    --icerik-modal-shadow:
        0 30px 80px rgba(0, 0, 0, 0.72);

    --icerik-error-bg: rgba(127, 29, 29, 0.2);
    --icerik-error-border: rgba(248, 113, 113, 0.34);
    --icerik-error-text: #fca5a5;

    width: 100%;

    color: var(--icerik-text);
}

.icerik-detay-section {
    width: 80%;
    margin-left: 10%;
    margin-right: 10%
}

.icerik-kart-listesi {
    display: flex;

    flex-direction: column;
    gap: 22px;
}

/* =========================================================
   İÇERİK KARTI
========================================================= */

.icerik-kart {
    position: relative;

    width: 100%;

    overflow: visible;

    border: 1px solid var(--icerik-border);
    border-radius: 22px;

    background: var(--icerik-card-bg);

    box-shadow: var(--icerik-card-shadow);
}


/* =========================================================
   ORTA ALAN
========================================================= */

.icerik-kart-orta {
    display: grid;

    grid-template-columns:
        minmax(0, 1.12fr)
        minmax(280px, 0.88fr);

    min-height: 410px;
}



/* =========================================================
   AÇIKLAMA
========================================================= */

.icerik-kart-devamini-gor {
    display: inline-flex;

    align-self: flex-start;
    align-items: center;
    gap: 7px;

    margin-top: 9px;
    padding: 0;

    border: 0;

    background: transparent;
    color: var(--icerik-primary);

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

    cursor: pointer;
}

.icerik-kart-devamini-gor:hover {
    color: var(--icerik-primary-hover);
}

.icerik-kart-devamini-gor[hidden] {
    display: none;
}

.icerik-kart-yorum:hover {
    color: var(--icerik-primary);
}


/* =========================================================
   YÜKLENİYOR VE HATA
========================================================= */

.dashboard-feed-loader {
    display: none;

    min-height: 120px;

    align-items: center;
    justify-content: center;
    gap: 12px;

    color: var(--icerik-muted);

    font-size: 13px;
}

.dashboard-feed-loader.active {
    display: flex;
}

.dashboard-feed-spinner {
    width: 24px;
    height: 24px;

    border: 3px solid var(--icerik-border);
    border-top-color: var(--icerik-primary);
    border-radius: 50%;

    animation: icerik-detay-spin 0.8s linear infinite;
}

@keyframes icerik-detay-spin {
    to {
        transform: rotate(360deg);
    }
}

.icerik-detay-hata {
    display: flex;

    align-items: center;
    gap: 14px;

    padding: 18px;

    border: 1px solid var(--icerik-error-border);
    border-radius: 18px;

    background: var(--icerik-error-bg);
    color: var(--icerik-error-text);
}

.icerik-detay-hata[hidden] {
    display: none;
}

.icerik-detay-hata > i {
    font-size: 23px;
}

.icerik-detay-hata > div {
    display: flex;
    min-width: 0;
    flex: 1;

    flex-direction: column;
    gap: 3px;
}

.icerik-detay-hata strong {
    font-size: 14px;
}

.icerik-detay-hata span {
    font-size: 12px;
    line-height: 1.45;
}

.icerik-detay-hata button {
    min-height: 38px;

    padding: 8px 13px;

    border: 0;
    border-radius: 11px;

    background: var(--icerik-error-text);
    color: #050505;

    font: inherit;
    font-size: 12px;
    font-weight: 600;

    cursor: pointer;
}

/* =========================================================
   YORUMLAR ALANI
========================================================= */

.icerik-yorumlar-section {
    margin-top: 24px;

    scroll-margin-top: 90px;
}

/* =========================================================
   GÖRSEL MODALI
========================================================= */

.icerik-gorsel-modal,
.icerik-aciklama-modal {
    position: fixed;
    inset: 0;
    z-index: 5000;

    display: none;

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

    padding: 24px;

    background: rgba(0, 0, 0, 0.88);

    backdrop-filter: blur(12px);
}

.icerik-gorsel-modal.open,
.icerik-aciklama-modal.open {
    display: flex;
}

.icerik-gorsel-modal-image-wrapper {
    position: relative;

    display: flex;

    min-height: 0;
    flex: 1;

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

    overflow: hidden;

    background: #000000;
}

.icerik-gorsel-modal-tag,
.icerik-gorsel-modal-counter {
    display: inline-flex;

    min-height: 30px;

    align-items: center;

    padding: 6px 10px;

    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;

    background: rgba(255, 255, 255, 0.07);

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

/* =========================================================
   AÇIKLAMA MODALI
========================================================= */

.icerik-aciklama-modal-dialog {
    width: min(680px, 96vw);
    max-height: min(78vh, 760px);

    overflow: hidden;

    border: 1px solid var(--icerik-border);
    border-radius: 22px;

    background: var(--icerik-card-bg);

    box-shadow: var(--icerik-modal-shadow);
}

.icerik-aciklama-modal-header {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;

    padding: 20px 22px;

    border-bottom: 1px solid var(--icerik-border-soft);
}

.icerik-aciklama-modal-eyebrow {
    color: var(--icerik-primary);

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.icerik-aciklama-modal-header h2 {
    margin: 5px 0 0;

    color: var(--icerik-text);

    font-size: 21px;
    line-height: 1.25;
}

.icerik-aciklama-modal-close {
    display: grid;

    width: 40px;
    height: 40px;

    flex: 0 0 40px;

    place-items: center;

    border: 1px solid var(--icerik-border);
    border-radius: 12px;

    background: var(--icerik-soft-bg);
    color: var(--icerik-text);

    cursor: pointer;
}

.icerik-aciklama-modal-body {
    max-height: calc(min(78vh, 760px) - 82px);

    overflow-y: auto;

    padding: 22px;

    color: var(--icerik-text-soft);

    font-size: 14px;
    line-height: 1.85;

    white-space: pre-wrap;
    overflow-wrap: anywhere;

    scrollbar-width: thin;
    scrollbar-color:
        #373737
        transparent;
}

.icerik-aciklama-modal-body::-webkit-scrollbar {
    width: 7px;
}

.icerik-aciklama-modal-body::-webkit-scrollbar-track {
    background: transparent;
}

.icerik-aciklama-modal-body::-webkit-scrollbar-thumb {
    border-radius: 999px;

    background: #373737;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 900px) {
    .icerik-kart-orta {
        grid-template-columns: 1fr;
    }

    .icerik-kart-gorsel-alani {
        border-radius: 0;
    }

    .icerik-kart-gorsel,
    .icerik-kart-gorsel img,
    .icerik-kart-gorsel-bos {
        min-height: 340px;
        height: 340px;
    }
}

@media (max-width: 640px) {
    .icerik-kart {
        border-radius: 17px;
    }

    .icerik-kart-header {
        gap: 9px;

        padding: 14px;
    }

    .icerik-kart-profil {
        width: 42px;
        height: 42px;

        flex-basis: 42px;

        border-radius: 13px;
    }

    .icerik-kart-zaman {
        display: none;
    }

    .icerik-kart-gorsel,
    .icerik-kart-gorsel img,
    .icerik-kart-gorsel-bos {
        min-height: 300px;
        height: 300px;
    }

    .icerik-kart-bilgi {
        padding: 20px 16px;
    }

    .icerik-kart-mekan {
        font-size: 19px;
    }

    .icerik-kart-alt {
        padding: 16px;
    }

    .icerik-kart-puan-butonlari {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .icerik-kart-etkilesim {
        align-items: flex-start;
    }

    .icerik-gorsel-modal,
    .icerik-aciklama-modal {
        padding: 10px;
    }

    .icerik-gorsel-modal-dialog,
    .icerik-aciklama-modal-dialog {
        border-radius: 17px;
    }

    .icerik-gorsel-modal-arrow {
        width: 40px;
        height: 40px;
    }

    .icerik-gorsel-modal-arrow.sol {
        left: 8px;
    }

    .icerik-gorsel-modal-arrow.sag {
        right: 8px;
    }
}

/* =========================================================
   YORUMLAR PARTIAL — KOYU TEMA
   Mevcut koyu.css dosyanın en altına ekleyebilirsin.

   Ana arka plan:
       #050505

   Kart:
       #111111

   Yüzeyler:
       #191919 / #1b1b1b

   Kenarlık:
       #2b2b2b
========================================================= */

.yorumlar-panel {
    --yorum-primary: #666666;
    --yorum-primary-hover: #636363;

    --yorum-page-bg: #050505;
    --yorum-card-bg: #111111;
    --yorum-surface-bg: #191919;
    --yorum-surface-hover: #202020;
    --yorum-input-bg: #171717;
    --yorum-dropdown-bg: #171717;

    --yorum-text: #f5f5f5;
    --yorum-text-soft: #cccccc;
    --yorum-muted: #8f8f8f;
    --yorum-placeholder: #707070;

    --yorum-border: #2b2b2b;
    --yorum-border-soft: #232323;
    --yorum-focus-border: #4a4a4a;

    --yorum-success: #4ade80;
    --yorum-success-soft: rgba(22, 163, 74, 0.14);

    --yorum-danger: #f87171;
    --yorum-danger-hover: #ef4444;
    --yorum-danger-soft: rgba(220, 38, 38, 0.14);

    --yorum-warning: #fbbf24;
    --yorum-warning-soft: rgba(245, 158, 11, 0.13);

    --yorum-shadow:
        0 14px 44px rgba(0, 0, 0, 0.42);

    --yorum-dropdown-shadow:
        0 18px 50px rgba(0, 0, 0, 0.66);

    --yorum-modal-shadow:
        0 32px 90px rgba(0, 0, 0, 0.76);

    position: relative;

    width: 80%;
    margin-left: 10%;
    margin-right: 10%;

    overflow: visible;

    border: 1px solid var(--yorum-border);
    border-radius: 22px;

    background: var(--yorum-card-bg);
    color: var(--yorum-text);

    box-shadow: var(--yorum-shadow);
}

/* =========================================================
   PANEL BAŞLIĞI
========================================================= */

.yorumlar-panel-header {
    display: flex;

    min-height: 76px;

    align-items: center;
    justify-content: space-between;
    gap: 18px;

    padding: 17px 20px;

    border-bottom: 1px solid var(--yorum-border-soft);

    background: var(--yorum-card-bg);
}

.yorumlar-panel-title-group {
    display: flex;
    min-width: 0;

    align-items: center;
    gap: 12px;
}

.yorumlar-panel-icon {
    display: grid;

    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    place-items: center;

    border: 1px solid var(--yorum-border);
    border-radius: 14px;

    background: var(--yorum-surface-bg);
    color: var(--yorum-primary);

    font-size: 17px;
}

.yorumlar-panel-title-group > div {
    display: flex;
    min-width: 0;

    flex-direction: column;
    gap: 2px;
}

.yorumlar-panel-eyebrow {
    color: var(--yorum-muted);

    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
}

.yorumlar-panel-title {
    margin: 0;

    color: var(--yorum-text);

    font-size: 17px;
    font-weight: 700;
    line-height: 1.25;
}

.yorumlar-panel-count {
    display: inline-flex;

    min-width: 34px;
    height: 30px;

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

    padding: 0 10px;

    border: 1px solid var(--yorum-border);
    border-radius: 999px;

    background: var(--yorum-surface-bg);
    color: var(--yorum-muted);

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

/* =========================================================
   LOADING
========================================================= */

.yorumlar-loading {
    display: none;

    min-height: 150px;

    align-items: center;
    justify-content: center;
    gap: 11px;

    padding: 24px;

    background: var(--yorum-card-bg);
    color: var(--yorum-muted);

    font-size: 12px;
    font-weight: 600;
}

.yorumlar-loading.active {
    display: flex;
}

.yorumlar-loading-spinner,
.yorum-button-spinner {
    display: inline-block;

    border-style: solid;
    border-color: var(--yorum-border);
    border-top-color: var(--yorum-primary);
    border-radius: 50%;

    animation: yorum-spinner-don 0.8s linear infinite;
}

.yorumlar-loading-spinner {
    width: 23px;
    height: 23px;

    border-width: 3px;
}

.yorum-button-spinner {
    width: 16px;
    height: 16px;

    border-width: 2px;
}

.yorum-button-spinner[hidden] {
    display: none;
}

@keyframes yorum-spinner-don {
    to {
        transform: rotate(360deg);
    }
}

/* =========================================================
   HATA DURUMU
========================================================= */

.yorumlar-error {
    display: flex;

    align-items: center;
    gap: 13px;

    margin: 16px 18px;
    padding: 15px 16px;

    border: 1px solid rgba(248, 113, 113, 0.3);
    border-radius: 16px;

    background: var(--yorum-danger-soft);
    color: #fca5a5;
}

.yorumlar-error[hidden] {
    display: none;
}

.yorumlar-error-icon {
    display: grid;

    width: 36px;
    height: 36px;

    flex: 0 0 36px;

    place-items: center;

    border-radius: 12px;

    background: rgba(248, 113, 113, 0.12);
    color: var(--yorum-danger);

    font-size: 17px;
}

.yorumlar-error-content {
    display: flex;
    min-width: 0;
    flex: 1;

    flex-direction: column;
    gap: 3px;
}

.yorumlar-error-content strong {
    color: #fecaca;

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

.yorumlar-error-content span {
    color: #fca5a5;

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

.yorumlar-error-retry {
    min-height: 36px;

    padding: 8px 12px;

    border: 1px solid rgba(248, 113, 113, 0.34);
    border-radius: 11px;

    background: rgba(248, 113, 113, 0.12);
    color: #fecaca;

    font: inherit;
    font-size: 11px;
    font-weight: 600;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.yorumlar-error-retry:hover {
    transform: translateY(-1px);

    border-color: var(--yorum-danger);

    background: var(--yorum-danger);
    color: #ffffff;
}

/* =========================================================
   BOŞ DURUM
========================================================= */

.yorumlar-empty {
    display: flex;

    min-height: 190px;

    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;

    padding: 26px;

    background: var(--yorum-card-bg);
    color: var(--yorum-muted);

    text-align: center;
}

.yorumlar-empty[hidden] {
    display: none;
}

.yorumlar-empty-icon {
    display: grid;

    width: 48px;
    height: 48px;

    margin-bottom: 3px;

    place-items: center;

    border: 1px solid var(--yorum-border);
    border-radius: 16px;

    background: var(--yorum-surface-bg);
    color: var(--yorum-primary);

    font-size: 20px;
}

.yorumlar-empty strong {
    color: var(--yorum-text);

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

.yorumlar-empty p {
    max-width: 390px;

    margin: 0;

    color: var(--yorum-muted);

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

/* =========================================================
   YORUM LİSTESİ
========================================================= */

.yorumlar-list {
    display: flex;

    flex-direction: column;

    padding: 0 18px;

    background: var(--yorum-card-bg);
}

.yorum-item {
    position: relative;

    padding: 18px 0;

    border-bottom: 1px solid var(--yorum-border-soft);
}

.yorum-item:last-child {
    border-bottom: 0;
}

.yorum-item-header,
.yorum-cevap-header {
    position: relative;

    display: flex;

    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* =========================================================
   KULLANICI BAŞLIĞI
========================================================= */

.yorum-kullanici-basligi {
    display: flex;
    min-width: 0;
    flex: 1;

    align-items: center;
    gap: 7px;
}

.yorum-avatar {
    display: grid;

    width: 28px;
    height: 28px;

    flex: 0 0 28px;

    overflow: hidden;
    place-items: center;

    border: 1px solid var(--yorum-border);
    border-radius: 50%;

    background: var(--yorum-surface-bg);
    color: var(--yorum-text);

    text-decoration: none;

    transition:
        border-color 0.2s ease,
        transform 0.2s ease;
}

.yorum-avatar:hover {
    transform: translateY(-1px);

    border-color: #484848;
}

.yorum-avatar img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.yorum-avatar-letter {
    color: var(--yorum-primary);

    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

.yorum-avatar-letter[hidden] {
    display: none;
}

.yorum-username {
    min-width: 0;
    max-width: 220px;

    overflow: hidden;

    color: var(--yorum-text);

    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.3;

    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;

    transition: color 0.2s ease;
}

.yorum-username:hover {
    color: var(--yorum-primary);
}

.yorum-takip-badge {
    display: grid;

    width: 18px;
    height: 18px;

    flex: 0 0 18px;

    place-items: center;

    border-radius: 50%;

    background: #33b957;
    color: #ffffff;

    font-size: 8px;
}

.yorum-zaman {
    margin-left: auto;

    color: var(--yorum-muted);

    font-size: 9.5px;
    font-weight: 600;
    white-space: nowrap;
}

/* =========================================================
   YORUM METNİ
========================================================= */

.yorum-item-text {
    margin: 8px 38px 0 35px;

    color: var(--yorum-text-soft);

    font-size: 12px;
    font-weight: 500;
    line-height: 1.55;

    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.yorum-item-actions {
    display: flex;

    align-items: center;
    gap: 12px;

    margin: 9px 38px 0 35px;
}

.yorum-cevapla-button,
.yorum-cevaplari-toggle {
    display: inline-flex;

    align-items: center;
    gap: 6px;

    padding: 0;

    border: 0;

    background: transparent;
    color: var(--yorum-muted);

    font: inherit;
    font-size: 10.5px;
    font-weight: 700;

    cursor: pointer;

    transition: color 0.2s ease;
}

.yorum-cevapla-button:hover,
.yorum-cevaplari-toggle:hover,
.yorum-cevapla-button.active {
    color: var(--yorum-primary);
}

.yorum-cevapla-button i,
.yorum-cevaplari-toggle i {
    font-size: 10px;
}

.yorum-cevap-count {
    color: var(--yorum-muted);

    font-size: 10px;
    font-weight: 600;
}

/* =========================================================
   ÜÇ NOKTA MENÜSÜ
========================================================= */

.yorum-menu {
    position: relative;

    flex: 0 0 auto;
}

.yorum-menu-button {
    display: grid;

    width: 31px;
    height: 31px;

    place-items: center;

    border: 0;
    border-radius: 10px;

    background: transparent;
    color: var(--yorum-muted);

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

.yorum-menu-button:hover,
.yorum-menu-button[aria-expanded="true"] {
    background: var(--yorum-surface-bg);
    color: var(--yorum-text);
}

.yorum-menu-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 100;

    display: none;

    width: 205px;

    overflow: hidden;

    border: 1px solid var(--yorum-border);
    border-radius: 13px;

    background: var(--yorum-dropdown-bg);

    box-shadow: var(--yorum-dropdown-shadow);
}

.yorum-menu-dropdown.open {
    display: block;
}

.yorum-menu-item {
    display: flex;

    width: 100%;
    min-height: 42px;

    align-items: center;
    gap: 9px;

    padding: 10px 12px;

    border: 0;

    background: transparent;
    color: var(--yorum-text);

    font: inherit;
    font-size: 11px;
    font-weight: 600;
    text-align: left;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

.yorum-menu-item:hover {
    background: var(--yorum-surface-hover);
}

.yorum-menu-item.danger {
    color: var(--yorum-danger);
}

.yorum-menu-item.danger:hover {
    background: var(--yorum-danger-soft);
    color: #fca5a5;
}

/* =========================================================
   CEVAPLAR
========================================================= */

.yorum-cevaplar-wrapper {
    margin: 0 0 0 35px;
}

.yorum-cevaplar-list {
    display: flex;

    flex-direction: column;
    gap: 8px;

    margin-top: 12px;
}

.yorum-cevap-item {
    position: relative;

    padding: 11px 12px;

    border: 1px solid var(--yorum-border-soft);
    border-radius: 14px;

    background: var(--yorum-surface-bg);

    transition:
        border-color 0.2s ease,
        background-color 0.2s ease;
}

.yorum-cevap-item:hover {
    border-color: var(--yorum-border);

    background: #1c1c1c;
}

.yorum-cevap-item .yorum-avatar {
    width: 25px;
    height: 25px;

    flex-basis: 25px;
}

.yorum-cevap-item .yorum-avatar-letter {
    font-size: 9px;
}

.yorum-cevap-item .yorum-username {
    max-width: 190px;

    font-size: 10.8px;
}

.yorum-cevap-item .yorum-zaman {
    font-size: 9px;
}

.yorum-cevap-item .yorum-menu-button {
    width: 28px;
    height: 28px;
}

.yorum-cevap-text {
    margin: 7px 30px 0 32px;

    color: var(--yorum-text-soft);

    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.5;

    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.yorum-cevaplari-toggle {
    margin-top: 9px;
}

/* =========================================================
   CEVAP FORMU
========================================================= */

.yorum-cevap-form {
    display: flex;

    align-items: flex-end;
    gap: 8px;

    margin-top: 11px;
}

.yorum-cevap-input-wrapper,
.yorum-ekleme-input-wrapper {
    position: relative;

    min-width: 0;
    flex: 1;
}

.yorum-cevap-input,
.yorum-ekleme-input {
    display: block;

    width: 100%;

    resize: none;

    border: 1px solid var(--yorum-border);
    outline: 0;

    background: var(--yorum-input-bg);
    color: var(--yorum-text);

    font-family: inherit;
    font-weight: 500;

    caret-color: var(--yorum-primary);

    transition:
        border-color 0.2s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease;
}

.yorum-cevap-input {
    min-height: 40px;
    max-height: 120px;

    padding: 11px 55px 10px 12px;

    border-radius: 12px;

    font-size: 11.5px;
    line-height: 1.45;
}

.yorum-ekleme-input {
    min-height: 44px;
    max-height: 120px;

    padding: 12px 64px 11px 13px;

    border-radius: 13px;

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

.yorum-cevap-input::placeholder,
.yorum-ekleme-input::placeholder {
    color: var(--yorum-placeholder);
}

.yorum-cevap-input:hover,
.yorum-ekleme-input:hover {
    border-color: var(--yorum-focus-border);
}

.yorum-cevap-input:focus,
.yorum-ekleme-input:focus {
    border-color: var(--yorum-primary);

    background: #1b1b1b;

    box-shadow:
        0 0 0 3px rgba(255, 107, 69, 0.12);
}

.yorum-cevap-karakter-sayaci,
.yorum-karakter-sayaci {
    position: absolute;

    color: var(--yorum-muted);

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

    pointer-events: none;
}

.yorum-cevap-karakter-sayaci {
    right: 10px;
    bottom: 9px;
}

.yorum-karakter-sayaci {
    right: 11px;
    bottom: 10px;
}

.yorum-cevap-gonder-button {
    display: grid;

    width: 40px;
    height: 40px;

    flex: 0 0 40px;

    place-items: center;

    border: 1px solid var(--yorum-border);
    border-radius: 12px;

    background: #050505;
    color: var(--yorum-text);

    cursor: pointer;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        background-color 0.2s ease,
        color 0.2s ease;
}

.yorum-cevap-gonder-button:hover {
    transform: translateY(-1px);

    border-color: var(--yorum-primary);

    background: #666666;
    color: #ffffff;
}

.yorum-cevap-gonder-button:disabled {
    opacity: 0.55;

    cursor: wait;
    transform: none;
}

.yorum-cevap-gonder-button.loading > i,
.yorum-gonder-button.loading .yorum-gonder-button-icon,
.yorum-gonder-button.loading .yorum-gonder-button-text {
    display: none;
}

.yorum-cevap-gonder-button .yorum-button-spinner {
    border-color: rgba(255, 255, 255, 0.24);
    border-top-color: #ffffff;
}

/* =========================================================
   ANA YORUM FORMU
========================================================= */

.yorum-ekleme-form {
    position: relative;

    display: flex;

    align-items: flex-end;
    gap: 9px;

    padding: 14px 18px 18px;

    border-top: 1px solid var(--yorum-border-soft);

    background: var(--yorum-card-bg);
}

.yorum-gonder-button {
    display: inline-flex;

    min-width: 104px;
    min-height: 44px;

    flex: 0 0 auto;

    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 10px 15px;

    border: 0;
    border-radius: 13px;

    background: #050505;
    color: #ffffff;

    font: inherit;
    font-size: 11px;
    font-weight: 700;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease;
}

.yorum-gonder-button:hover {
    transform: translateY(-1px);

    background: #666666;

    box-shadow:
        0 10px 24px rgba(255, 107, 69, 0.2);
}

.yorum-gonder-button:disabled {
    opacity: 0.58;

    cursor: wait;
    transform: none;
    box-shadow: none;
}

.yorum-gonder-button .yorum-button-spinner {
    border-color: rgba(255, 255, 255, 0.38);
    border-top-color: #ffffff;
}

/* =========================================================
   ONAY MODALI
========================================================= */

.yorum-onay-modal {
    position: fixed;
    inset: 0;
    z-index: 7000;

    display: none;

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

    padding: 20px;

    background: rgba(0, 0, 0, 0.82);

    backdrop-filter: blur(10px);
}

.yorum-onay-modal.open {
    display: flex;
}

.yorum-onay-modal-dialog {
    width: min(420px, 96vw);

    padding: 23px;

    border: 1px solid var(--yorum-border);
    border-radius: 22px;

    background: var(--yorum-card-bg);
    color: var(--yorum-text);

    text-align: center;

    box-shadow: var(--yorum-modal-shadow);
}

.yorum-onay-modal-icon {
    display: grid;

    width: 52px;
    height: 52px;

    margin: 0 auto 14px;

    place-items: center;

    border: 1px solid var(--yorum-border);
    border-radius: 17px;

    background: var(--yorum-surface-bg);
    color: var(--yorum-text);

    font-size: 21px;
}

.yorum-onay-modal-icon.danger {
    border-color: rgba(248, 113, 113, 0.26);

    background: var(--yorum-danger-soft);
    color: var(--yorum-danger);
}

.yorum-onay-modal-icon.report {
    border-color: rgba(251, 191, 36, 0.22);

    background: var(--yorum-warning-soft);
    color: var(--yorum-warning);
}

.yorum-onay-modal-title {
    margin: 0;

    color: var(--yorum-text);

    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
}

.yorum-onay-modal-message {
    margin: 8px 0 0;

    color: var(--yorum-muted);

    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.55;
}

.yorum-onay-modal-actions {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 9px;

    margin-top: 20px;
}

.yorum-onay-modal-cancel,
.yorum-onay-modal-confirm {
    min-height: 42px;

    padding: 9px 12px;

    border-radius: 12px;

    font: inherit;
    font-size: 11px;
    font-weight: 700;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        background-color 0.2s ease,
        color 0.2s ease;
}

.yorum-onay-modal-cancel {
    border: 1px solid var(--yorum-border);

    background: var(--yorum-surface-bg);
    color: var(--yorum-text);
}

.yorum-onay-modal-cancel:hover {
    border-color: #454545;

    background: var(--yorum-surface-hover);
}

.yorum-onay-modal-confirm {
    border: 1px solid #f5f5f5;

    background: #f5f5f5;
    color: #111111;
}

.yorum-onay-modal-confirm:hover {
    transform: translateY(-1px);

    background: #ffffff;
}

.yorum-onay-modal-confirm.danger {
    border-color: var(--yorum-danger);

    background: var(--yorum-danger);
    color: #ffffff;
}

.yorum-onay-modal-confirm.danger:hover {
    border-color: var(--yorum-danger-hover);

    background: var(--yorum-danger-hover);
}

.yorum-onay-modal-confirm.report {
    border-color: #f5f5f5;

    background: #f5f5f5;
    color: #111111;
}

.yorum-onay-modal-confirm.report:hover {
    border-color: #ffffff;

    background: #ffffff;
}

/* =========================================================
   TOAST
========================================================= */

.yorum-toast {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 8000;

    display: flex;

    max-width: min(390px, calc(100vw - 32px));

    align-items: center;
    gap: 10px;

    padding: 13px 15px;

    transform: translateY(20px);

    border: 1px solid var(--yorum-border);
    border-radius: 14px;

    background: #171717;
    color: var(--yorum-text);

    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.4;

    opacity: 0;

    pointer-events: none;

    box-shadow:
        0 18px 48px rgba(0, 0, 0, 0.68);

    transition:
        opacity 0.22s ease,
        transform 0.22s ease;
}

.yorum-toast[hidden] {
    display: none;
}

.yorum-toast.show {
    transform: translateY(0);

    opacity: 1;
}

.yorum-toast.success {
    border-color: rgba(74, 222, 128, 0.28);

    background: rgba(20, 83, 45, 0.92);
    color: #dcfce7;
}

.yorum-toast.error {
    border-color: rgba(248, 113, 113, 0.3);

    background: rgba(127, 29, 29, 0.94);
    color: #fee2e2;
}

.yorum-toast-icon {
    display: grid;

    width: 25px;
    height: 25px;

    flex: 0 0 25px;

    place-items: center;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.08);

    font-size: 13px;
}

.yorum-toast.success .yorum-toast-icon {
    color: #86efac;
}

.yorum-toast.error .yorum-toast-icon {
    color: #fca5a5;
}

/* =========================================================
   SCROLLBAR
========================================================= */

.yorum-cevap-input,
.yorum-ekleme-input {
    scrollbar-width: thin;
    scrollbar-color:
        #3a3a3a
        transparent;
}

.yorum-cevap-input::-webkit-scrollbar,
.yorum-ekleme-input::-webkit-scrollbar {
    width: 5px;
}

.yorum-cevap-input::-webkit-scrollbar-track,
.yorum-ekleme-input::-webkit-scrollbar-track {
    background: transparent;
}

.yorum-cevap-input::-webkit-scrollbar-thumb,
.yorum-ekleme-input::-webkit-scrollbar-thumb {
    border-radius: 999px;

    background: #3a3a3a;
}

.yorum-cevap-input::-webkit-scrollbar-thumb:hover,
.yorum-ekleme-input::-webkit-scrollbar-thumb:hover {
    background: #4b4b4b;
}

/* =========================================================
   SEÇİM RENGİ
========================================================= */

.yorumlar-panel ::selection {
    background: rgba(255, 107, 69, 0.3);
    color: #ffffff;
}

/* =========================================================
   ACCESSIBILITY
========================================================= */

.yorum-menu-button:focus-visible,
.yorum-menu-item:focus-visible,
.yorum-cevapla-button:focus-visible,
.yorum-cevaplari-toggle:focus-visible,
.yorum-cevap-gonder-button:focus-visible,
.yorum-gonder-button:focus-visible,
.yorumlar-error-retry:focus-visible,
.yorum-onay-modal-cancel:focus-visible,
.yorum-onay-modal-confirm:focus-visible {
    outline: 3px solid rgba(255, 107, 69, 0.24);
    outline-offset: 2px;
}

/* =========================================================
   DISABLED DURUMLARI
========================================================= */

.yorum-menu-button:disabled,
.yorum-menu-item:disabled,
.yorum-cevapla-button:disabled,
.yorum-cevaplari-toggle:disabled,
.yorum-cevap-gonder-button:disabled,
.yorum-gonder-button:disabled,
.yorumlar-error-retry:disabled,
.yorum-onay-modal-cancel:disabled,
.yorum-onay-modal-confirm:disabled {
    opacity: 0.5;

    cursor: not-allowed;
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 820px) {
    .yorumlar-panel {
        border-radius: 19px;
    }

    .yorumlar-panel-header {
        min-height: 70px;

        padding: 15px 17px;
    }

    .yorumlar-list {
        padding: 0 16px;
    }

    .yorum-ekleme-form {
        padding: 13px 16px 16px;
    }
}

/* =========================================================
   MOBİL
========================================================= */

@media (max-width: 640px) {
    .yorumlar-panel {
        border-radius: 16px;
    }

    .yorumlar-panel-header {
        min-height: 64px;

        gap: 12px;

        padding: 13px 14px;
    }

    .yorumlar-panel-icon {
        width: 38px;
        height: 38px;

        flex-basis: 38px;

        border-radius: 12px;

        font-size: 15px;
    }

    .yorumlar-panel-eyebrow {
        display: none;
    }

    .yorumlar-panel-title {
        font-size: 15px;
    }

    .yorumlar-panel-count {
        min-width: 30px;
        height: 27px;

        padding: 0 8px;

        font-size: 10px;
    }

    .yorumlar-error {
        align-items: flex-start;

        margin: 13px;
        padding: 13px;
    }

    .yorumlar-error-retry {
        display: none;
    }

    .yorumlar-list {
        padding: 0 13px;
    }

    .yorum-item {
        padding: 15px 0;
    }

    .yorum-avatar {
        width: 26px;
        height: 26px;

        flex-basis: 26px;
    }

    .yorum-username {
        max-width: 150px;

        font-size: 11px;
    }

    .yorum-zaman {
        font-size: 8.7px;
    }

    .yorum-item-text {
        margin:
            7px
            34px
            0
            33px;

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

    .yorum-item-actions {
        margin:
            8px
            34px
            0
            33px;
    }

    .yorum-cevaplar-wrapper {
        margin-left: 33px;
    }

    .yorum-cevap-item {
        padding: 10px;

        border-radius: 12px;
    }

    .yorum-cevap-text {
        margin:
            6px
            28px
            0
            30px;

        font-size: 11px;
    }

    .yorum-menu-dropdown {
        width: 190px;
    }

    .yorum-cevap-form {
        gap: 7px;
    }

    .yorum-cevap-input {
        padding-right: 48px;
    }

    .yorum-cevap-gonder-button {
        width: 38px;
        height: 38px;

        flex-basis: 38px;
    }

    .yorum-ekleme-form {
        gap: 7px;

        padding: 11px 13px 14px;
    }

    .yorum-ekleme-input {
        min-height: 42px;

        padding:
            11px
            58px
            10px
            12px;

        font-size: 11.5px;
    }

    .yorum-gonder-button {
        min-width: 44px;
        width: 44px;
        min-height: 42px;

        padding: 0;

        border-radius: 12px;
    }

    .yorum-gonder-button-text {
        display: none;
    }

    .yorum-gonder-button-icon {
        font-size: 14px;
    }

    .yorum-onay-modal {
        padding: 14px;
    }

    .yorum-onay-modal-dialog {
        padding: 20px;

        border-radius: 18px;
    }

    .yorum-onay-modal-icon {
        width: 48px;
        height: 48px;

        border-radius: 15px;
    }

    .yorum-onay-modal-title {
        font-size: 15px;
    }

    .yorum-onay-modal-actions {
        gap: 8px;
    }

    .yorum-toast {
        right: 14px;
        bottom: 14px;
        left: 14px;

        max-width: none;
    }
}

/* =========================================================
   ÇOK KÜÇÜK EKRANLAR
========================================================= */

@media (max-width: 390px) {
    .yorum-username {
        max-width: 118px;
    }

    .yorum-zaman {
        font-size: 8px;
    }

    .yorum-item-text {
        margin-right: 31px;
    }

    .yorum-cevaplar-wrapper {
        margin-left: 27px;
    }

    .yorum-item-actions {
        margin-left: 27px;
    }

    .yorum-cevap-count {
        display: none;
    }

    .yorum-onay-modal-actions {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   HAREKET AZALTMA TERCİHİ
========================================================= */

@media (prefers-reduced-motion: reduce) {
    .yorumlar-panel *,
    .yorumlar-panel *::before,
    .yorumlar-panel *::after {
        scroll-behavior: auto !important;

        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;
    }
}

/* =========================================================
   MESAJLAR SAYFASI - KOYU TEMA
   Ana arka plan: #050505
========================================================= */

.messages-page {
    display: grid;
    grid-template-columns: minmax(320px, 390px) minmax(0, 1fr);
    min-height: 680px;
    overflow: hidden;

    border: 1px solid #242424;
    border-radius: 22px;

    background: #050505;

    box-shadow:
        0 20px 55px rgba(0, 0, 0, 0.5);
}


/* =========================================================
   SOL KONUŞMA PANELİ
========================================================= */

.messages-sidebar {
    min-width: 0;

    border-right: 1px solid #242424;

    background: #050505;
}

.messages-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height: 84px;
    padding: 18px 20px;

    border-bottom: 1px solid #1d1d1d;

    background: #070707;
}

.messages-sidebar-title {
    margin: 0;

    color: #f5f5f5;

    font-size: 18px;
    font-weight: 600;
    line-height: 1.25;
}

.messages-sidebar-description {
    margin: 4px 0 0;

    color: #8c8c8c;

    font-size: 13px;
    line-height: 1.4;
}


/* =========================================================
   KONUŞMA LİSTESİ
========================================================= */

.conversation-list {
    max-height: calc(100vh - 270px);
    min-height: 590px;
    overflow-y: auto;
    overscroll-behavior: contain;

    background: #050505;
}

.conversation-list::-webkit-scrollbar {
    width: 7px;
}

.conversation-list::-webkit-scrollbar-track {
    background: transparent;
}

.conversation-list::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #2e2e2e;
}

.conversation-list::-webkit-scrollbar-thumb:hover {
    background: #444444;
}

.conversation-item {
    position: relative;

    display: grid;
    grid-template-columns: 50px minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;

    width: 100%;
    min-height: 82px;
    padding: 15px 16px;

    border: 0;
    border-bottom: 1px solid #181818;

    background: transparent;

    color: inherit;
    font: inherit;
    text-align: left;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.conversation-item:hover {
    background: #0e0e0e;
}

.conversation-item:focus-visible {
    z-index: 2;

    outline: 3px solid rgba(239, 68, 68, 0.28);
    outline-offset: -3px;
}

.conversation-item.is-active {
    background: #160b0b;

    box-shadow:
        inset 4px 0 0 #ef4444;
}


/* =========================================================
   KULLANICI RESMİ
========================================================= */

.conversation-avatar-column {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 50px;
    height: 50px;
}

.conversation-avatar {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 50px;
    height: 50px;
    flex-shrink: 0;

    border: 1px solid #303030;
    border-radius: 50%;

    background: #151515;

    object-fit: cover;
}

.conversation-avatar-placeholder {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #ef4444,
            #991b1b
        );

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


/* =========================================================
   KONUŞMA ORTA SÜTUNU
========================================================= */

.conversation-main-column {
    min-width: 0;
}

.conversation-name-row {
    display: flex;
    align-items: center;

    min-width: 0;
    margin-bottom: 7px;
}

.conversation-username {
    display: block;

    min-width: 0;
    overflow: hidden;

    color: #f1f1f1;

    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.conversation-message-row {
    display: flex;
    align-items: center;
    gap: 5px;

    min-width: 0;
}

.conversation-last-message {
    display: block;

    min-width: 0;
    overflow: hidden;

    color: #8c8c8c;

    font-size: 13px;
    font-weight: 450;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.conversation-last-message.is-unread {
    color: #f5f5f5;
    font-weight: 600;
}


/* =========================================================
   OKUNMAMIŞ NOKTASI
========================================================= */

.conversation-unread-dot {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;

    border-radius: 50%;

    background: #ef4444;

    box-shadow:
        0 0 0 3px rgba(239, 68, 68, 0.15);
}


/* =========================================================
   ÇİFT TİK
========================================================= */

.conversation-ticks {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 22px;
    height: 16px;
    flex: 0 0 22px;
}

.conversation-ticks svg {
    width: 22px;
    height: 16px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2.1;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.conversation-ticks.is-read {
    color: #22c55e;
}

.conversation-ticks.is-unread {
    color: #666666;
}


/* =========================================================
   SAĞ SÜTUN, BADGE VE OK
========================================================= */

.conversation-side-column {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;

    min-width: 30px;
}

.conversation-unread-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 23px;
    height: 23px;
    padding: 0 7px;

    border-radius: 999px;

    background: #ef4444;
    color: #ffffff;

    font-size: 11px;
    font-weight: 600;
    line-height: 1;

    box-shadow:
        0 4px 12px rgba(239, 68, 68, 0.22);
}

.conversation-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 20px;
    height: 20px;

    color: #555555;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

.conversation-arrow svg {
    width: 19px;
    height: 19px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.conversation-item:hover .conversation-arrow,
.conversation-item.is-active .conversation-arrow {
    color: #ef4444;

    transform: translateX(2px);
}


/* =========================================================
   MESAJ KUTUSU
========================================================= */

.message-box {
    position: relative;

    min-width: 0;
    min-height: 680px;

    background: #090909;
}

.message-box-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-height: 680px;
    padding: 40px;

    background:
        radial-gradient(
            circle at center,
            rgba(239, 68, 68, 0.045),
            transparent 42%
        ),
        #090909;

    text-align: center;
}

.message-box-placeholder-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 78px;
    height: 78px;
    margin-bottom: 22px;

    border: 1px solid #3a1a1a;
    border-radius: 24px;

    background: #170b0b;
    color: #ef4444;
}

.message-box-placeholder-icon svg {
    width: 35px;
    height: 35px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.message-box-placeholder h3 {
    margin: 0;

    color: #f5f5f5;

    font-size: 21px;
    font-weight: 600;
}

.message-box-placeholder p {
    max-width: 340px;
    margin: 10px 0 0;

    color: #858585;

    font-size: 14px;
    line-height: 1.6;
}

.message-content-container {
    width: 100%;
    min-height: 680px;

    background: #090909;
}


/* =========================================================
   YÜKLENİYOR, HATA VE BOŞ DURUMLAR
========================================================= */

.messages-loading,
.message-content-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;

    padding: 30px 20px;

    color: #8c8c8c;

    font-size: 13px;
    font-weight: 600;
}

.message-content-loading {
    min-height: 680px;

    background: #090909;
}

.messages-loading-spinner {
    width: 22px;
    height: 22px;

    border: 3px solid #292929;
    border-top-color: #ef4444;
    border-radius: 50%;

    animation: messages-spin 0.75s linear infinite;
}

@keyframes messages-spin {
    to {
        transform: rotate(360deg);
    }
}

.messages-error {
    display: flex;
    align-items: center;
    gap: 10px;

    margin: 15px;
    padding: 13px 14px;

    border: 1px solid #4a1b1b;
    border-radius: 12px;

    background: #190b0b;
    color: #fca5a5;

    font-size: 13px;
    font-weight: 600;
}

.messages-error-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 22px;
    height: 22px;
    flex: 0 0 22px;

    border-radius: 50%;

    background: #ef4444;
    color: #ffffff;

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

.messages-empty {
    display: flex;
    flex-direction: column;
    align-items: center;

    padding: 55px 24px;

    color: #858585;
    text-align: center;
}

.messages-empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 58px;
    height: 58px;
    margin-bottom: 16px;

    border: 1px solid #242424;
    border-radius: 18px;

    background: #101010;
    color: #686868;
}

.messages-empty-icon svg {
    width: 27px;
    height: 27px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.messages-empty strong {
    margin-bottom: 6px;

    color: #d4d4d4;

    font-size: 15px;
}

.messages-empty span {
    max-width: 280px;

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

.message-content-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-height: 680px;
    padding: 30px;

    background: #090909;
    color: #858585;
    text-align: center;
}

.message-content-error strong {
    margin-bottom: 7px;

    color: #fca5a5;

    font-size: 17px;
}


/* hidden özelliğinin diğer display kurallarından üstün olması */
.messages-loading[hidden],
.messages-error[hidden],
.messages-empty[hidden],
.message-box-placeholder[hidden],
.message-content-loading[hidden],
.message-content-error[hidden],
.message-content-container[hidden] {
    display: none !important;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1050px) {
    .messages-page {
        grid-template-columns: minmax(290px, 340px) minmax(0, 1fr);
    }
}

@media (max-width: 850px) {
    .messages-page {
        display: block;

        min-height: auto;
        overflow: visible;
    }

    .messages-sidebar {
        border-right: 0;
        border-bottom: 1px solid #242424;
    }

    .conversation-list {
        max-height: 520px;
        min-height: 0;
    }

    .message-box,
    .message-box-placeholder,
    .message-content-loading,
    .message-content-error,
    .message-content-container {
        min-height: 600px;
    }
}

@media (max-width: 520px) {
    .messages-page {
        margin-right: -4px;
        margin-left: -4px;

        border-radius: 16px;
    }

    .messages-sidebar-header {
        min-height: 74px;
        padding: 15px 14px;
    }

    .conversation-item {
        grid-template-columns: 46px minmax(0, 1fr) auto;
        gap: 10px;

        min-height: 76px;
        padding: 13px 12px;
    }

    .conversation-avatar-column,
    .conversation-avatar {
        width: 46px;
        height: 46px;
    }

    .conversation-username {
        font-size: 14px;
    }

    .conversation-last-message {
        font-size: 12px;
    }

    .conversation-side-column {
        gap: 5px;
    }

    .conversation-unread-badge {
        min-width: 21px;
        height: 21px;
        padding: 0 6px;
    }
}

/* =========================================================
   MESAJ DETAY SAYFASI — KOYU TEMA
   ========================================================= */

.mesaj-detay-sayfasi,
.mesaj-detay-sayfasi * {
    box-sizing: border-box;
}

.mesaj-detay-sayfasi {
    position: relative;

    display: flex;
    flex-direction: column;

    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
    max-width: 1100px;
    height: calc(100dvh - 80px);
    min-height: 560px;

    margin: 0 auto;

    overflow: hidden;

    border: 1px solid #2b323d;
    border-radius: 18px;

    background: #11151b;
    color: #e5e7eb;

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.38);
}


/* =========================================================
   KONUŞMA BAŞLIĞI
   ========================================================= */

.mesaj-konusma-basligi {
    position: relative;
    z-index: 20;

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

    flex: 0 0 auto;

    min-height: 70px;
    padding: 10px 16px;

    border-bottom: 1px solid #2b323d;

    background: #050505;

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.mesaj-geri-butonu {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 42px;
    height: 42px;
    padding: 0;

    border: 1px solid #343c48;
    border-radius: 50%;

    color: #d8dde5;
    background: #050505;

    text-decoration: none;

    transition:
        transform 0.18s ease,
        color 0.18s ease,
        border-color 0.18s ease,
        background-color 0.18s ease;
}

.mesaj-geri-butonu:hover {
    color: #ffffff;
    border-color: #485363;
    background: #666666;
    transform: translateX(-2px);
}

.mesaj-geri-butonu svg {
    width: 22px;
    height: 22px;
}

.mesaj-baslik-profil-alani {
    display: flex;
    align-items: center;
    gap: 11px;

    min-width: 0;
    flex: 1;

    padding: 4px 8px;
    border-radius: 12px;

    user-select: none;
}

.mesaj-baslik-profil-baglantili {
    cursor: pointer;

    transition:
        background-color 0.18s ease,
        transform 0.18s ease;
}

.mesaj-baslik-profil-baglantili:hover {
    background: #222831;
}

.mesaj-baslik-profil-baglantili:active {
    transform: scale(0.995);
}

.mesaj-baslik-profil-resmi {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 46px;
    height: 46px;

    overflow: hidden;

    border: 1px solid #3a4350;
    border-radius: 50%;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #64748b,
            #263140
        );

    font-size: 17px;
    font-weight: 600;
}

.mesaj-baslik-profil-resmi img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.mesaj-baslik-kullanici-alani {
    display: flex;
    flex-direction: column;
    gap: 3px;

    min-width: 0;
}

.mesaj-baslik-username {
    display: block;

    overflow: hidden;

    color: #f4f6f8;

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

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

.mesaj-baslik-durum {
    display: block;

    overflow: hidden;

    color: #050505;

    font-size: 12px;
    line-height: 1.3;

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


/* =========================================================
   MESAJ KAYDIRMA ALANI
   ========================================================= */

.mesaj-kaydirma-alani {
    position: relative;

    flex: 1 1 auto;

    min-height: 0;
    padding: 18px 18px 22px;

    overflow-x: hidden;
    overflow-y: auto;

    overscroll-behavior: contain;
    scroll-behavior: smooth;

    background: #050505;

    scrollbar-width: thin;
    scrollbar-color: #424b58 transparent;
}

.mesaj-kaydirma-alani::-webkit-scrollbar {
    width: 8px;
}

.mesaj-kaydirma-alani::-webkit-scrollbar-track {
    background: transparent;
}

.mesaj-kaydirma-alani::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 20px;

    background: #424b58;
    background-clip: padding-box;
}


/* =========================================================
   YÜKLENME VE BOŞ DURUM
   ========================================================= */

.mesaj-ilk-yukleme {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    min-height: 180px;

    color: #9ca5b2;

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

.mesaj-ilk-yukleme[hidden] {
    display: none;
}

.mesaj-yukleniyor-spinner,
.mesaj-gonder-yukleniyor-ikon {
    display: inline-block;

    width: 20px;
    height: 20px;

    border: 2px solid rgba(203, 213, 225, 0.2);
    border-top-color: #cbd5e1;
    border-radius: 50%;

    animation:
        mesaj-dondur
        0.75s
        linear
        infinite;
}

.mesaj-yukleme-hatasi {
    width: min(100%, 520px);

    margin: 20px auto;
    padding: 14px 16px;

    border: 1px solid #7f1d1d;
    border-radius: 12px;

    color: #fecaca;
    background: rgba(127, 29, 29, 0.25);

    font-size: 14px;
    line-height: 1.5;
    text-align: center;
}

.mesaj-bos-durum {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;

    min-height: 260px;
    padding: 32px 18px;

    color: #8f99a7;

    text-align: center;
}

.mesaj-bos-durum[hidden] {
    display: none;
}

.mesaj-bos-durum strong {
    color: #dce1e8;
    font-size: 16px;
}

.mesaj-bos-durum > span {
    max-width: 420px;

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

.mesaj-bos-durum-ikon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 62px;
    height: 62px;
    margin-bottom: 8px;

    border-radius: 50%;

    color: #aab2bd;
    background: #222831;
}

.mesaj-bos-durum-ikon svg {
    width: 31px;
    height: 31px;
}


/* =========================================================
   ESKİ MESAJLARI YÜKLE
   ========================================================= */

.mesaj-eski-mesajlari-yukle {
    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 180px;
    min-height: 38px;

    margin: 0 auto 18px;
    padding: 8px 14px;

    border: 1px solid #343c48;
    border-radius: 999px;

    color: #bac1cc;
    background: #1b2028;

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

    cursor: pointer;

    transition:
        color 0.18s ease,
        border-color 0.18s ease,
        background-color 0.18s ease,
        transform 0.18s ease;
}

.mesaj-eski-mesajlari-yukle:hover {
    color: #ffffff;
    border-color: #4a5564;
    background: #252c35;

    transform: translateY(-1px);
}

.mesaj-eski-mesajlari-yukle:disabled {
    opacity: 0.55;
    cursor: wait;
    transform: none;
}

.mesaj-eski-mesajlari-yukle[hidden],
.mesaj-eski-mesajlar-metni[hidden],
.mesaj-eski-mesajlar-yukleniyor[hidden] {
    display: none;
}


/* =========================================================
   MESAJ LİSTESİ VE SATIRLAR
   ========================================================= */

.mesaj-liste {
    display: flex;
    flex-direction: column;
    gap: 9px;

    width: 100%;
}

.mesaj-satiri {
    position: relative;

    display: flex;
    align-items: flex-end;
    gap: 8px;

    width: 100%;

    scroll-margin: 100px 0;
}

.mesaj-satiri-kendim {
    justify-content: flex-end;
}

.mesaj-satiri-karsi {
    justify-content: flex-start;
}

.mesaj-balonu {
    position: relative;

    display: flex;
    flex-direction: column;
    gap: 8px;

    width: fit-content;
    max-width: 80%;
    min-width: 90px;

    padding: 38px 12px 8px;

    overflow: hidden;

    border: 1px solid transparent;
    border-radius: 16px;

    word-break: break-word;
    overflow-wrap: anywhere;

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        outline-color 0.18s ease;
}

.mesaj-satiri-karsi .mesaj-balonu {
    border-bottom-left-radius: 5px;

    color: #e3e7ed;
    border-color: #303843;
    background: #1c2129;

    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.22);
}

.mesaj-satiri-kendim .mesaj-balonu {
    border-bottom-right-radius: 5px;

    color: #edf5ff;
    border-color: #315678;
    background: #24435f;

    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.2);
}

.mesaj-vurgulandi .mesaj-balonu {
    animation:
        mesaj-vurgula-koyu
        1.8s
        ease;
}


/* =========================================================
   MESAJ İŞLEM İKONLARI
   ========================================================= */

.mesaj-islem-alani {
    position: absolute;
    top: 6px;
    right: 7px;
    z-index: 5;

    display: flex;
    align-items: center;
    gap: 4px;
}

.mesaj-islem-butonu {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 27px;
    height: 27px;
    padding: 0;

    border: 0;
    border-radius: 50%;

    color: #b6bec9;
    background: rgba(13, 17, 23, 0.58);

    cursor: pointer;

    transition:
        color 0.18s ease,
        background-color 0.18s ease,
        transform 0.18s ease,
        opacity 0.18s ease;
}

.mesaj-islem-butonu:hover {
    color: #ffffff;
    background: #10151c;

    transform: scale(1.07);
}

.mesaj-islem-butonu svg {
    width: 16px;
    height: 16px;
}

.mesaj-silme-modu-butonu:hover {
    color: #f87171;
}

.mesaj-silme-modu-aktif
.mesaj-islem-alani {
    display: none;
}


/* =========================================================
   CEVAPLANAN MESAJ KARTI
   ========================================================= */

.mesaj-cevaplanan-kart {
    display: flex;
    flex-direction: column;
    gap: 3px;

    width: 100%;
    padding: 8px 10px;

    border: 0;
    border-left: 3px solid #94a3b8;
    border-radius: 8px;

    color: inherit;
    background: rgba(0, 0, 0, 0.2);

    text-align: left;

    cursor: pointer;

    transition:
        background-color 0.18s ease,
        transform 0.18s ease;
}

.mesaj-cevaplanan-kart:hover {
    background: rgba(0, 0, 0, 0.31);

    transform: translateY(-1px);
}

.mesaj-cevaplanan-kart strong {
    overflow: hidden;

    color: #d7dde5;

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

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

.mesaj-cevaplanan-kart span {
    display: -webkit-box;
    overflow: hidden;

    color: #abb4c0;

    font-size: 12px;
    line-height: 1.35;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}


/* =========================================================
   MESAJ METNİ
   ========================================================= */

.mesaj-metin-kapsayici {
    min-width: 0;
}

.mesaj-metin {
    color: inherit;

    font-size: 14px;
    line-height: 1.48;

    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.mesaj-metin-daraltilmis {
    display: -webkit-box;
    overflow: hidden;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    line-clamp: 6;
}

.mesaj-metin-tam {
    display: block;
    overflow: visible;

    -webkit-line-clamp: unset;
    line-clamp: unset;
}

.mesaj-devamini-gor {
    display: inline-flex;

    margin-top: 5px;
    padding: 0;

    border: 0;

    color: #7db5ff;
    background: transparent;

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

    cursor: pointer;
}

.mesaj-devamini-gor:hover {
    text-decoration: underline;
}


/* =========================================================
   MESAJ ALT BİLGİSİ VE ÇİFT TİK
   ========================================================= */

.mesaj-balonu-alt {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;

    min-height: 16px;
}

.mesaj-tarih {
    color: #a1a9b5;

    font-size: 10px;
    line-height: 1;
    white-space: nowrap;
}

.mesaj-tik-alani {
    position: relative;

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

    width: 19px;
    height: 13px;
}

.mesaj-tik-alani svg {
    position: absolute;

    width: 14px;
    height: 14px;
}

.mesaj-tik-alani svg:first-child {
    left: 0;
}

.mesaj-tik-alani svg:last-child {
    left: 5px;
}

.mesaj-tik-okundu {
    color: #4ade80;
}

.mesaj-tik-okunmadi {
    color: #929baa;
}


/* =========================================================
   DOĞRUDAN RESİM / VİDEO PAYLAŞIMLARI
   ========================================================= */

.mesaj-direkt-medya-listesi {
    --mesaj-medya-boyutu: 170px;

    display: inline-grid;
    gap: 4px;

    width: fit-content;
    max-width: 100%;

    overflow: hidden;

    border-radius: 11px;
}

.mesaj-medya-adet-1 {
    grid-template-columns:
        minmax(0, min(340px, 70vw));
}

.mesaj-medya-adet-2 {
    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                var(--mesaj-medya-boyutu)
            )
        );
}

.mesaj-medya-adet-3 {
    grid-template-columns:
        repeat(
            3,
            minmax(
                0,
                150px
            )
        );
}

.mesaj-medya-adet-4 {
    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                var(--mesaj-medya-boyutu)
            )
        );
}

.mesaj-direkt-medya {
    position: relative;

    display: block;

    width: 100%;
    aspect-ratio: 1 / 1;

    overflow: hidden;

    border: 0;
    padding: 0;

    background: transparent;

    cursor: pointer;
}

.mesaj-direkt-medya img,
.mesaj-direkt-medya video {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

@media (max-width: 600px) {
    .mesaj-direkt-medya-listesi {
        --mesaj-medya-boyutu:
            calc((100vw - 100px) / 2);
    }

    .mesaj-medya-adet-3 {
        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    var(--mesaj-medya-boyutu)
                )
            );
    }

    .mesaj-medya-adet-3
    .mesaj-direkt-medya:last-child {
        grid-column: 1 / -1;

        width:
            var(--mesaj-medya-boyutu);

        justify-self: center;
    }
}

.mesaj-direkt-medya:hover img,
.mesaj-direkt-medya:hover video {
    filter: brightness(0.86);
    transform: scale(1.025);
}

.mesaj-video-oynat-ikonu {
    position: absolute;
    top: 50%;
    left: 50%;

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

    width: 46px;
    height: 46px;

    border: 1px solid rgba(255, 255, 255, 0.66);
    border-radius: 50%;

    color: #ffffff;
    background: rgba(0, 0, 0, 0.62);

    transform: translate(-50%, -50%);

    pointer-events: none;

    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.mesaj-video-oynat-ikonu svg {
    width: 22px;
    height: 22px;
}


/* =========================================================
   İÇERİK / MEKÂN / KULLANICI KARTLARI
   ========================================================= */

.mesaj-ozel-paylasim-listesi {
    display: flex;
    flex-direction: column;
    gap: 8px;

    width: min(100%, 360px);
}

.mesaj-paylasim-karti {
    display: flex;
    flex-direction: column;
    gap: 8px;

    width: 100%;
    padding: 10px;

    overflow: hidden;

    border: 1px solid #3a4350;
    border-radius: 12px;

    background: rgba(10, 14, 20, 0.32);
}

.mesaj-paylasim-baslik {
    display: block;

    overflow: hidden;

    color: #edf1f6;

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

    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

a.mesaj-paylasim-baslik:hover {
    color: #82b9ff;
    text-decoration: underline;
}

.mesaj-paylasim-mekan-adi {
    color: #d4dae2;
}

.mesaj-paylasim-kare-medya {
    position: relative;

    display: block;

    width: 100%;
    aspect-ratio: 1 / 1;

    overflow: hidden;

    border-radius: 10px;

    background: #10141a;

    text-decoration: none;
}

.mesaj-paylasim-kare-medya img,
.mesaj-paylasim-kare-medya video {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    transition:
        transform 0.25s ease,
        filter 0.25s ease;
}

a.mesaj-paylasim-kare-medya:hover img,
a.mesaj-paylasim-kare-medya:hover video {
    filter: brightness(0.88);
    transform: scale(1.02);
}

.mesaj-paylasim-aciklama,
.mesaj-mekan-adres {
    margin: 0;

    color: #b8c0cb;

    font-size: 12px;
    line-height: 1.45;

    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.mesaj-paylasim-aciklama-uc-satir {
    display: -webkit-box;
    overflow: hidden;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

.mesaj-paylasim-erisilemez {
    border-color: #7f1d1d;
    background: rgba(127, 29, 29, 0.18);
}

.mesaj-paylasim-uyari {
    padding: 10px;

    border-radius: 8px;

    color: #fecaca;
    background: rgba(127, 29, 29, 0.27);

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


/* =========================================================
   YENİ MESAJ / AŞAĞI İN BUTONU
   ========================================================= */

.mesaj-asagi-in-butonu {
    position: absolute;
    right: 22px;
    bottom: 94px;
    z-index: 30;

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

    width: 46px;
    height: 46px;
    padding: 0;

    border: 1px solid #3b4451;
    border-radius: 50%;

    color: #d8dee7;
    background: rgba(28, 33, 41, 0.96);

    box-shadow:
        0 9px 24px rgba(0, 0, 0, 0.42);

    cursor: pointer;

    transition:
        transform 0.18s ease,
        background-color 0.18s ease;
}

.mesaj-asagi-in-butonu:hover {
    background: #29303a;
    transform: translateY(-2px);
}

.mesaj-asagi-in-butonu[hidden] {
    display: none;
}

.mesaj-asagi-in-butonu svg {
    width: 22px;
    height: 22px;
}

.mesaj-yeni-mesaj-sayisi {
    position: absolute;
    top: -7px;
    right: -5px;

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

    min-width: 22px;
    height: 22px;
    padding: 0 5px;

    border: 2px solid #1c2129;
    border-radius: 999px;

    color: #ffffff;
    background: #dc2626;

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

.mesaj-yeni-mesaj-sayisi[hidden] {
    display: none;
}


/* =========================================================
   CEVAPLAMA ÖN İZLEMESİ
   ========================================================= */

.mesaj-cevaplama-alani {
    position: relative;
    z-index: 20;

    display: flex;
    align-items: stretch;
    gap: 10px;

    flex: 0 0 auto;

    min-height: 58px;
    padding: 9px 12px;

    border-top: 1px solid #303743;

    background: #181d24;
}

.mesaj-cevaplama-alani[hidden] {
    display: none;
}

.mesaj-cevaplama-cizgisi {
    flex: 0 0 auto;

    width: 4px;

    border-radius: 999px;

    background: #60a5fa;
}

.mesaj-cevaplama-bilgisi {
    display: flex;
    flex-direction: column;
    gap: 3px;

    min-width: 0;
    flex: 1;
}

.mesaj-cevaplama-bilgisi strong {
    overflow: hidden;

    color: #7db5ff;

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

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

#mesaj-cevaplama-metni {
    display: -webkit-box;
    overflow: hidden;

    color: #b9c1cc;

    font-size: 12px;
    line-height: 1.35;

    white-space: pre-wrap;
    overflow-wrap: anywhere;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

.mesaj-cevaplama-kapat {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 32px;
    height: 32px;
    padding: 0;

    border: 0;
    border-radius: 50%;

    color: #98a2af;
    background: transparent;

    cursor: pointer;
}

.mesaj-cevaplama-kapat:hover {
    color: #ffffff;
    background: #2a313b;
}

.mesaj-cevaplama-kapat svg {
    width: 18px;
    height: 18px;
}


/* =========================================================
   MESAJ SİLME ÇUBUĞU
   ========================================================= */

.mesaj-silme-alani {
    position: relative;
    z-index: 22;

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

    flex: 0 0 auto;

    min-height: 58px;
    padding: 9px 14px;

    border-top: 1px solid #303743;

    background: #171b22;
}

.mesaj-silme-alani[hidden] {
    display: none;
}

.mesaj-silme-bilgisi {
    min-width: 0;
    flex: 1;

    color: #c0c7d1;

    font-size: 14px;
    text-align: center;
}

.mesaj-silme-bilgisi strong {
    color: #ffffff;
}

.mesaj-silme-iptal,
.mesaj-secilileri-sil {
    min-height: 38px;
    padding: 8px 14px;

    border-radius: 10px;

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

    cursor: pointer;

    transition:
        opacity 0.18s ease,
        transform 0.18s ease,
        border-color 0.18s ease,
        background-color 0.18s ease;
}

.mesaj-silme-iptal {
    border: 1px solid #39414d;

    color: #d6dbe2;
    background: #232831;
}

.mesaj-silme-iptal:hover {
    border-color: #4c5664;
    background: #2b323d;
}

.mesaj-secilileri-sil {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    border: 1px solid #ef4444;

    color: #ffffff;
    background: #dc2626;
}

.mesaj-secilileri-sil:hover:not(:disabled) {
    background: #b91c1c;
    transform: translateY(-1px);
}

.mesaj-secilileri-sil:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.mesaj-secilileri-sil svg {
    width: 17px;
    height: 17px;
}

.mesaj-secilileri-sil.mesaj-siliniyor {
    cursor: wait;
}


/* =========================================================
   MESAJ SEÇİM CHECKBOXLARI
   ========================================================= */

.mesaj-secim-checkbox-kapsayici {
    display: none;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 30px;

    cursor: pointer;
}

.mesaj-silme-modu-aktif
.mesaj-satiri-kendim
.mesaj-secim-checkbox-kapsayici {
    display: flex;
}

.mesaj-secim-checkbox {
    position: absolute;

    width: 1px;
    height: 1px;

    opacity: 0;
    pointer-events: none;
}

.mesaj-secim-checkbox-gorunum {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 23px;
    height: 23px;

    border: 2px solid #667180;
    border-radius: 50%;

    color: transparent;
    background: #1b2028;

    transition:
        color 0.18s ease,
        border-color 0.18s ease,
        background-color 0.18s ease,
        transform 0.18s ease;
}

.mesaj-secim-checkbox-gorunum svg {
    width: 14px;
    height: 14px;
}

.mesaj-secim-checkbox-kapsayici:hover
.mesaj-secim-checkbox-gorunum {
    border-color: #f87171;

    transform: scale(1.06);
}

.mesaj-secim-checkbox:checked
+ .mesaj-secim-checkbox-gorunum {
    color: #ffffff;
    border-color: #ef4444;
    background: #dc2626;
}

.mesaj-satiri-secilebilir
.mesaj-balonu {
    cursor: pointer;
}

.mesaj-satiri-secili
.mesaj-balonu {
    outline: 2px solid rgba(248, 113, 113, 0.82);
    outline-offset: 2px;
}


/* =========================================================
   DOSYA ÖN İZLEME
   ========================================================= */

.mesaj-dosya-onizleme-alani {
    position: relative;
    z-index: 20;

    display: flex;
    flex-direction: column;
    gap: 9px;

    flex: 0 0 auto;

    padding: 10px 12px;

    border-top: 1px solid #303743;

    background: #181d24;
}

.mesaj-dosya-onizleme-alani[hidden] {
    display: none;
}

.mesaj-dosya-onizleme-baslik {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    color: #b3bbc6;

    font-size: 12px;
    font-weight: 600;
}

.mesaj-dosya-onizleme-baslik strong {
    color: #f3f4f6;
}

.mesaj-tum-dosyalari-kaldir {
    padding: 0;

    border: 0;

    color: #f87171;
    background: transparent;

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

    cursor: pointer;
}

.mesaj-tum-dosyalari-kaldir:hover {
    text-decoration: underline;
}

.mesaj-dosya-onizleme-listesi {
    display: flex;
    gap: 8px;

    padding-bottom: 3px;

    overflow-x: auto;
    overflow-y: hidden;

    scrollbar-width: thin;
    scrollbar-color: #424b58 transparent;
}

.mesaj-dosya-onizleme-karti {
    position: relative;

    flex: 0 0 auto;

    width: 88px;
    height: 88px;

    overflow: hidden;

    border: 1px solid #39414d;
    border-radius: 11px;

    background: #10141a;
}

.mesaj-dosya-onizleme-karti img,
.mesaj-dosya-onizleme-karti video {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.mesaj-dosya-onizleme-kaldir {
    position: absolute;
    top: 4px;
    right: 4px;

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

    width: 24px;
    height: 24px;
    padding: 0;

    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 50%;

    color: #ffffff;
    background: rgba(0, 0, 0, 0.72);

    cursor: pointer;
}

.mesaj-dosya-onizleme-kaldir:hover {
    background: rgba(127, 29, 29, 0.9);
}

.mesaj-dosya-onizleme-kaldir svg {
    width: 14px;
    height: 14px;
}

.mesaj-dosya-tip-etiketi {
    position: absolute;
    right: 4px;
    bottom: 4px;

    padding: 3px 6px;

    border-radius: 999px;

    color: #ffffff;
    background: rgba(0, 0, 0, 0.72);

    font-size: 9px;
    font-weight: 600;
}


/* =========================================================
   MESAJ GÖNDERME FORMU
   ========================================================= */

.mesaj-gonder-formu {
    position: relative;
    z-index: 20;

    display: flex;
    align-items: flex-end;
    gap: 9px;

    flex: 0 0 auto;

    min-height: 70px;
    padding: 11px 12px;

    border-top: 1px solid #2e3540;

    background: #050505;

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.mesaj-gonder-formu[hidden] {
    display: none;
}

.mesaj-dosya-sec-butonu,
.mesaj-gonder-butonu {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 44px;
    height: 44px;
    padding: 0;

    border-radius: 50%;

    cursor: pointer;

    transition:
        transform 0.18s ease,
        opacity 0.18s ease,
        border-color 0.18s ease,
        background-color 0.18s ease;
}

.mesaj-dosya-sec-butonu {
    border: 1px solid #39414d;

    color: #c5ccd5;
    background: #252b34;
}

.mesaj-dosya-sec-butonu:hover:not(:disabled) {
    color: #ffffff;
    border-color: #4b5664;
    background: #303741;

    transform: scale(1.04);
}

.mesaj-dosya-sec-butonu svg {
    width: 23px;
    height: 23px;
}

.mesaj-textarea-kapsayici {
    display: flex;
    align-items: center;

    min-width: 0;
    flex: 1;

    min-height: 44px;
    padding: 9px 12px;

    border: 1px solid #39414d;
    border-radius: 18px;

    background: #222831;

    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background-color 0.18s ease;
}

.mesaj-textarea-kapsayici:focus-within {
    border-color: #4d91e8;
    background: #252c35;

    box-shadow:
        0 0 0 3px rgba(59, 130, 246, 0.16);
}

.mesaj-textarea-kapsayici textarea {
    display: block;

    width: 100%;
    min-height: 24px;
    max-height: 150px;
    padding: 0;

    resize: none;
    overflow-y: auto;

    border: 0;
    outline: 0;

    color: #f3f4f6;
    background: transparent;

    font: inherit;
    font-size: 14px;
    line-height: 1.5;

    scrollbar-width: thin;
    scrollbar-color: #4a5564 transparent;
}

.mesaj-textarea-kapsayici textarea::placeholder {
    color: #7f8996;
}

.mesaj-gonder-butonu {
    border: 1px solid #3b82f6;

    color: #ffffff;
    background: #2563eb;
}

.mesaj-gonder-butonu:hover:not(:disabled) {
    background: #1d4ed8;

    transform: scale(1.04);
}

.mesaj-gonder-butonu svg {
    width: 22px;
    height: 22px;
}

.mesaj-gonder-butonu:disabled,
.mesaj-dosya-sec-butonu:disabled,
.mesaj-textarea-kapsayici textarea:disabled {
    opacity: 0.48;
    cursor: not-allowed;
}

.mesaj-gonder-normal-ikon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mesaj-gonder-normal-ikon[hidden],
.mesaj-gonder-yukleniyor-ikon[hidden] {
    display: none;
}

.mesaj-gonder-yukleniyor-ikon {
    width: 20px;
    height: 20px;

    border-color: rgba(255, 255, 255, 0.3);
    border-top-color: #ffffff;
}

.mesaj-gonderiliyor {
    cursor: wait;
}

.mesaj-gonderim-kapali-bilgisi {
    position: relative;
    z-index: 20;

    flex: 0 0 auto;

    padding: 15px 16px;

    border-top: 1px solid #7f1d1d;

    color: #fecaca;
    background: rgba(127, 29, 29, 0.24);

    font-size: 13px;
    font-weight: 600;
    text-align: center;
}

.mesaj-gonderim-kapali-bilgisi[hidden] {
    display: none;
}


/* =========================================================
   MEDYA GÖRÜNTÜLEYİCİ
   ========================================================= */

body.mesaj-medya-acik {
    overflow: hidden;
}

.mesaj-medya-goruntuleyici {
    position: fixed;
    inset: 0;
    z-index: 99999;

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

    padding: 58px 76px;

    background: rgba(2, 4, 8, 0.94);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.mesaj-medya-goruntuleyici[hidden] {
    display: none;
}

.mesaj-medya-icerik {
    display: flex;
    align-items: center;
    justify-content: center;

    width: min(100%, 1100px);
    height: min(82dvh, 820px);

    overflow: hidden;

    border: 1px solid #242b34;
    border-radius: 14px;

    background: rgba(10, 13, 18, 0.72);
}

.mesaj-medya-icerik img,
.mesaj-medya-icerik video {
    display: block;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;
}

.mesaj-medya-icerik video {
    width: 100%;
    height: 100%;
}

.mesaj-medya-kapat,
.mesaj-medya-gezinme {
    position: fixed;
    z-index: 100001;

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

    padding: 0;

    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;

    color: #ffffff;
    background: rgba(15, 20, 27, 0.78);

    cursor: pointer;

    transition:
        transform 0.18s ease,
        background-color 0.18s ease;
}

.mesaj-medya-kapat:hover,
.mesaj-medya-gezinme:hover {
    background: rgba(36, 43, 53, 0.98);
}

.mesaj-medya-kapat {
    top: 18px;
    right: 20px;

    width: 44px;
    height: 44px;
}

.mesaj-medya-kapat:hover {
    transform: scale(1.05);
}

.mesaj-medya-kapat svg {
    width: 23px;
    height: 23px;
}

.mesaj-medya-gezinme {
    top: 50%;

    width: 50px;
    height: 50px;

    transform: translateY(-50%);
}

.mesaj-medya-gezinme:hover {
    transform:
        translateY(-50%)
        scale(1.05);
}

.mesaj-medya-gezinme[hidden] {
    display: none;
}

.mesaj-medya-gezinme svg {
    width: 26px;
    height: 26px;
}

.mesaj-medya-onceki {
    left: 18px;
}

.mesaj-medya-sonraki {
    right: 18px;
}

.mesaj-medya-sayac {
    position: fixed;
    top: 21px;
    left: 50%;
    z-index: 100001;

    display: flex;
    align-items: center;
    gap: 4px;

    min-width: 60px;
    padding: 7px 13px;

    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;

    color: #ffffff;
    background: rgba(15, 20, 27, 0.78);

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

    transform: translateX(-50%);
}


/* =========================================================
   ANİMASYONLAR
   ========================================================= */

@keyframes mesaj-dondur {
    to {
        transform: rotate(360deg);
    }
}

@keyframes mesaj-vurgula-koyu {
    0%,
    100% {
        box-shadow:
            0 4px 14px rgba(0, 0, 0, 0.22);
    }

    20%,
    65% {
        box-shadow:
            0 0 0 4px rgba(96, 165, 250, 0.32),
            0 8px 24px rgba(37, 99, 235, 0.25);
    }
}


/* =========================================================
   TABLET VE MOBİL
   ========================================================= */

@media (max-width: 768px) {
    .mesaj-detay-sayfasi {
        max-width: none;
        height: 100dvh;
        min-height: 0;

        margin: 0;

        border: 0;
        border-radius: 0;

        box-shadow: none;
    }

    .mesaj-konusma-basligi {
        min-height: 64px;

        padding:
            max(
                8px,
                env(safe-area-inset-top)
            )
            10px
            8px;
    }

    .mesaj-geri-butonu {
        width: 39px;
        height: 39px;
    }

    .mesaj-baslik-profil-resmi {
        width: 42px;
        height: 42px;
    }

    .mesaj-kaydirma-alani {
        padding: 14px 10px 18px;
    }

    .mesaj-balonu {
        max-width: 80%;
        padding: 37px 10px 8px;
    }

    .mesaj-metin {
        font-size: 13.5px;
    }

    .mesaj-direkt-medya-listesi,
    .mesaj-ozel-paylasim-listesi {
        max-width: 100%;
    }

    .mesaj-asagi-in-butonu {
        right: 14px;
        bottom:
            calc(
                82px
                + env(safe-area-inset-bottom)
            );

        width: 43px;
        height: 43px;
    }

    .mesaj-gonder-formu {
        min-height: 65px;

        padding:
            9px
            9px
            calc(
                9px
                + env(safe-area-inset-bottom)
            );
    }

    .mesaj-dosya-sec-butonu,
    .mesaj-gonder-butonu {
        width: 42px;
        height: 42px;
    }

    .mesaj-textarea-kapsayici {
        min-height: 42px;
        padding: 8px 10px;
    }

    .mesaj-islem-butonu {
        width: 29px;
        height: 29px;
    }

    .mesaj-silme-alani {
        padding:
            9px
            10px
            calc(
                9px
                + env(safe-area-inset-bottom)
            );
    }

    .mesaj-silme-iptal,
    .mesaj-secilileri-sil {
        min-height: 36px;
        padding: 7px 11px;
    }

    .mesaj-medya-goruntuleyici {
        padding: 58px 12px 24px;
    }

    .mesaj-medya-icerik {
        width: 100%;
        height: 78dvh;

        border-radius: 8px;
    }

    .mesaj-medya-gezinme {
        top: auto;
        bottom: 16px;

        width: 44px;
        height: 44px;

        transform: none;
    }

    .mesaj-medya-gezinme:hover {
        transform: scale(1.05);
    }

    .mesaj-medya-onceki {
        left: calc(50% - 54px);
    }

    .mesaj-medya-sonraki {
        right: calc(50% - 54px);
    }
}

@media (max-width: 430px) {
    .mesaj-konusma-basligi {
        gap: 7px;
    }

    .mesaj-baslik-profil-alani {
        gap: 8px;
        padding: 3px;
    }

    .mesaj-baslik-username {
        font-size: 15px;
    }

    .mesaj-balonu {
        max-width: 80%;
    }

    .mesaj-paylasim-karti {
        padding: 8px;
    }

    .mesaj-silme-bilgisi {
        font-size: 12px;
    }

    .mesaj-dosya-onizleme-karti {
        width: 78px;
        height: 78px;
    }
}


/* =========================================================
   ERİŞİLEBİLİRLİK VE HAREKET AZALTMA
   ========================================================= */

.mesaj-geri-butonu:focus-visible,
.mesaj-baslik-profil-alani:focus-visible,
.mesaj-eski-mesajlari-yukle:focus-visible,
.mesaj-islem-butonu:focus-visible,
.mesaj-cevaplanan-kart:focus-visible,
.mesaj-devamini-gor:focus-visible,
.mesaj-asagi-in-butonu:focus-visible,
.mesaj-cevaplama-kapat:focus-visible,
.mesaj-silme-iptal:focus-visible,
.mesaj-secilileri-sil:focus-visible,
.mesaj-tum-dosyalari-kaldir:focus-visible,
.mesaj-dosya-sec-butonu:focus-visible,
.mesaj-gonder-butonu:focus-visible,
.mesaj-medya-kapat:focus-visible,
.mesaj-medya-gezinme:focus-visible {
    outline: 2px solid #60a5fa;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .mesaj-detay-sayfasi *,
    .mesaj-detay-sayfasi *::before,
    .mesaj-detay-sayfasi *::after,
    .mesaj-medya-goruntuleyici *,
    .mesaj-medya-goruntuleyici *::before,
    .mesaj-medya-goruntuleyici *::after {
        scroll-behavior: auto !important;

        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;
    }
}

/* =========================================================
   KONUŞMA KARTI SİLME BUTONU — KOYU TEMA
   ========================================================= */

.conversation-item {
    cursor: pointer;
}

.conversation-item:focus-visible {
    outline: 2px solid #60a5fa;
    outline-offset: -2px;
}

.conversation-side-column {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;

    flex: 0 0 auto;
}

.conversation-delete-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 30px;
    height: 30px;
    padding: 0;

    border: 1px solid transparent;
    border-radius: 50%;

    color: #8f99a7;
    background: transparent;

    cursor: pointer;

    opacity: 0.76;

    transition:
        color 0.18s ease,
        border-color 0.18s ease,
        background-color 0.18s ease,
        opacity 0.18s ease,
        transform 0.18s ease;
}

.conversation-delete-button:hover {
    color: #f87171;
    border-color: rgba(248, 113, 113, 0.34);
    background: rgba(127, 29, 29, 0.25);

    opacity: 1;

    transform: scale(1.06);
}

.conversation-delete-button:active {
    transform: scale(0.96);
}

.conversation-delete-button:focus-visible {
    color: #f87171;

    outline: 2px solid rgba(248, 113, 113, 0.4);
    outline-offset: 2px;

    opacity: 1;
}

.conversation-delete-button svg {
    width: 17px;
    height: 17px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =========================================================
   KONUŞMA SİLME ONAY MODALI — KOYU TEMA
   ========================================================= */

body.mesaj-onay-modal-acik {
    overflow: hidden;
}

.mesaj-onay-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;

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

    padding: 20px;

    opacity: 0;

    transition:
        opacity 0.18s ease;
}

.mesaj-onay-modal[hidden] {
    display: none;
}

.mesaj-onay-modal.is-visible {
    opacity: 1;
}

.mesaj-onay-modal-arkaplan {
    position: absolute;
    inset: 0;

    background: #050505;

    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}

.mesaj-onay-modal-kutu {
    position: relative;
    z-index: 1;

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

    width: min(100%, 430px);
    padding: 28px 25px 22px;

    border: 1px solid #343c47;
    border-radius: 20px;

    background: #050505;

    box-shadow:
        0 28px 75px rgba(0, 0, 0, 0.56);

    transform:
        translateY(10px)
        scale(0.97);

    transition:
        transform 0.18s ease;
}

.mesaj-onay-modal.is-visible
.mesaj-onay-modal-kutu {
    transform:
        translateY(0)
        scale(1);
}

.mesaj-onay-modal-kapat {
    position: absolute;
    top: 13px;
    right: 13px;

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

    width: 34px;
    height: 34px;
    padding: 0;

    border: 0;
    border-radius: 50%;

    color: #959fac;
    background: transparent;

    cursor: pointer;

    transition:
        color 0.18s ease,
        background-color 0.18s ease,
        transform 0.18s ease;
}

.mesaj-onay-modal-kapat:hover {
    color: #ffffff;
    background: #292f38;

    transform: rotate(3deg);
}

.mesaj-onay-modal-kapat svg {
    width: 19px;
    height: 19px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.mesaj-onay-modal-ikon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 66px;
    height: 66px;
    margin-bottom: 17px;

    border: 1px solid rgba(248, 113, 113, 0.38);
    border-radius: 50%;

    color: #f87171;
    background: rgba(127, 29, 29, 0.27);

    box-shadow:
        0 0 0 8px rgba(127, 29, 29, 0.12);
}

.mesaj-onay-modal-ikon svg {
    width: 31px;
    height: 31px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mesaj-onay-modal-icerik {
    width: 100%;

    text-align: center;
}

.mesaj-onay-modal-icerik h3 {
    margin: 0 0 9px;

    color: #f3f4f6;

    font-size: 20px;
    font-weight: 600;
    line-height: 1.25;
}

.mesaj-onay-modal-icerik p {
    margin: 0;

    color: #b6bec9;

    font-size: 14px;
    line-height: 1.55;
}

.mesaj-onay-modal-uyari {
    display: block;

    margin-top: 12px;
    padding: 9px 11px;

    border: 1px solid #343c47;
    border-radius: 10px;

    color: #9ea7b3;
    background: #151a21;

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

.mesaj-onay-modal-butonlar {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 10px;

    width: 100%;
    margin-top: 22px;
}

.mesaj-onay-modal-vazgec,
.mesaj-onay-modal-onayla {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 44px;
    padding: 10px 15px;

    border-radius: 11px;

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

    cursor: pointer;

    transition:
        color 0.18s ease,
        border-color 0.18s ease,
        background-color 0.18s ease,
        opacity 0.18s ease,
        transform 0.18s ease;
}

.mesaj-onay-modal-vazgec {
    border: 1px solid #3a424e;

    color: #d5dae1;
    background: #050505;
}

.mesaj-onay-modal-vazgec:hover:not(:disabled) {
    border-color: #4b5563;
    background: #666666;

    transform: translateY(-1px);
}

.mesaj-onay-modal-onayla {
    border: 1px solid #ef4444;

    color: #ffffff;
    background: #dc2626;

    box-shadow:
        0 7px 18px rgba(220, 38, 38, 0.2);
}

.mesaj-onay-modal-onayla:hover:not(:disabled) {
    border-color: #b91c1c;
    background: #b91c1c;

    transform: translateY(-1px);
}

.mesaj-onay-modal-vazgec:disabled,
.mesaj-onay-modal-onayla:disabled,
.mesaj-onay-modal-kapat:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

.mesaj-onay-modal-onayla.is-loading {
    cursor: wait;
}

.mesaj-onay-modal-onayla-normal[hidden],
.mesaj-onay-modal-yukleniyor[hidden] {
    display: none;
}

.mesaj-onay-modal-yukleniyor {
    width: 20px;
    height: 20px;

    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #ffffff;
    border-radius: 50%;

    animation:
        mesaj-onay-modal-dondur
        0.75s
        linear
        infinite;
}

@keyframes mesaj-onay-modal-dondur {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 560px) {
    .conversation-side-column {
        gap: 4px;
    }

    .conversation-delete-button {
        width: 28px;
        height: 28px;
    }

    .conversation-delete-button svg {
        width: 16px;
        height: 16px;
    }

    .mesaj-onay-modal {
        align-items: flex-end;

        padding:
            12px
            12px
            calc(
                12px
                + env(safe-area-inset-bottom)
            );
    }

    .mesaj-onay-modal-kutu {
        width: 100%;
        padding: 27px 18px 18px;

        border-radius: 20px;
    }

    .mesaj-onay-modal-butonlar {
        grid-template-columns: 1fr;
    }

    .mesaj-onay-modal-onayla {
        order: -1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mesaj-onay-modal,
    .mesaj-onay-modal-kutu,
    .conversation-delete-button {
        transition-duration: 0.01ms !important;
    }
}

/* =========================================================
   PROFİLDEN MESAJ GÖNDER — KOYU TEMA
   ========================================================= */

.hs-other-profile-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.hs-other-profile-message-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    border: 1px solid #3a4350;

    color: #dce2ea;
    background: #222831;

    transition:
        color 0.18s ease,
        border-color 0.18s ease,
        background-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease;
}

.hs-other-profile-message-button:hover:not(:disabled) {
    color: #93c5fd;
    border-color: #3b82f6;
    background: rgba(37, 99, 235, 0.16);

    box-shadow:
        0 7px 18px rgba(37, 99, 235, 0.15);

    transform: translateY(-1px);
}

.hs-other-profile-message-button:active:not(:disabled) {
    transform: translateY(0);
}

.hs-other-profile-message-button:disabled,
.hs-other-profile-message-button.is-disabled {
    opacity: 0.46;
    cursor: not-allowed;
    transform: none;
}

.hs-other-profile-message-button svg {
    flex: 0 0 auto;

    width: 19px;
    height: 19px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =========================================================
   MESAJ GÖNDERME MODALI
   ========================================================= */

.hs-message-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;

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

    padding: 20px;

    opacity: 0;

    transition:
        opacity 0.18s ease;
}

.hs-message-modal[hidden] {
    display: none;
}

.hs-message-modal.is-open {
    opacity: 1;
}

.hs-message-modal-backdrop {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;
    padding: 0;

    border: 0;

    background: rgba(0, 0, 0, 0.7);

    cursor: default;

    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}

.hs-message-modal-dialog {
    position: relative;
    z-index: 1;

    width: min(100%, 510px);
    padding: 28px 25px 23px;

    border: 1px solid #343c47;
    border-radius: 20px;

    background: #050505;

    box-shadow:
        0 28px 75px rgba(0, 0, 0, 0.58);

    transform:
        translateY(12px)
        scale(0.97);

    transition:
        transform 0.18s ease;
}

.hs-message-modal.is-open
.hs-message-modal-dialog {
    transform:
        translateY(0)
        scale(1);
}

.hs-message-modal-close {
    position: absolute;
    top: 13px;
    right: 13px;

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

    width: 34px;
    height: 34px;
    padding: 0;

    border: 0;
    border-radius: 50%;

    color: #99a3af;
    background: transparent;

    cursor: pointer;

    transition:
        color 0.18s ease,
        background-color 0.18s ease,
        transform 0.18s ease;
}

.hs-message-modal-close:hover {
    color: #ffffff;
    background: #29303a;

    transform: rotate(3deg);
}

.hs-message-modal-close svg {
    width: 19px;
    height: 19px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.hs-message-modal-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 62px;
    height: 62px;
    margin: 0 auto 17px;

    border: 1px solid rgba(96, 165, 250, 0.38);
    border-radius: 50%;

    color: #7db5ff;
    background: rgba(37, 99, 235, 0.18);

    box-shadow:
        0 0 0 8px rgba(37, 99, 235, 0.08);
}

.hs-message-modal-icon svg {
    width: 29px;
    height: 29px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hs-message-modal-content {
    width: 100%;
}

.hs-message-modal-title {
    margin: 0 0 8px;

    color: #f3f4f6;

    font-size: 21px;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
}

.hs-message-modal-description {
    margin: 0 0 18px;

    color: #adb6c2;

    font-size: 14px;
    line-height: 1.5;
    text-align: center;
}

.hs-message-modal-textarea-wrapper {
    position: relative;

    width: 100%;
}

.hs-message-modal-textarea {
    display: block;

    width: 100%;
    min-height: 135px;
    max-height: 280px;
    padding: 14px 14px 34px;

    resize: vertical;

    border: 1px solid #39424e;
    border-radius: 13px;
    outline: none;

    color: #f3f4f6;
    background: #222831;

    font: inherit;
    font-size: 14px;
    line-height: 1.55;

    transition:
        border-color 0.18s ease,
        background-color 0.18s ease,
        box-shadow 0.18s ease;
}

.hs-message-modal-textarea:focus {
    border-color: #4d91e8;
    background: #252c35;

    box-shadow:
        0 0 0 3px rgba(59, 130, 246, 0.16);
}

.hs-message-modal-textarea::placeholder {
    color: #7f8996;
}

.hs-message-modal-textarea:disabled {
    opacity: 0.62;
    cursor: wait;
}

.hs-message-modal-counter {
    position: absolute;
    right: 12px;
    bottom: 10px;

    color: #87919e;

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

    pointer-events: none;
}

.hs-message-modal-error {
    margin-top: 10px;
    padding: 10px 12px;

    border: 1px solid #7f1d1d;
    border-radius: 10px;

    color: #fecaca;
    background: rgba(127, 29, 29, 0.25);

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

.hs-message-modal-error[hidden] {
    display: none;
}

.hs-message-modal-actions {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 10px;

    width: 100%;
    margin-top: 20px;
}

.hs-message-modal-cancel,
.hs-message-modal-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 44px;
    padding: 10px 15px;

    border-radius: 11px;

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

    cursor: pointer;

    transition:
        border-color 0.18s ease,
        background-color 0.18s ease,
        opacity 0.18s ease,
        transform 0.18s ease;
}

.hs-message-modal-cancel {
    border: 1px solid #3a424e;

    color: #d6dbe2;
    background: #242a33;
}

.hs-message-modal-cancel:hover:not(:disabled) {
    border-color: #4b5563;
    background: #2d343e;

    transform: translateY(-1px);
}

.hs-message-modal-submit {
    border: 1px solid #3b82f6;

    color: #ffffff;
    background: #2563eb;

    box-shadow:
        0 7px 18px rgba(37, 99, 235, 0.2);
}

.hs-message-modal-submit:hover:not(:disabled) {
    border-color: #1d4ed8;
    background: #1d4ed8;

    transform: translateY(-1px);
}

.hs-message-modal-cancel:disabled,
.hs-message-modal-submit:disabled,
.hs-message-modal-close:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.hs-message-modal-submit.is-loading {
    cursor: wait;
}

.hs-message-modal-spinner {
    width: 20px;
    height: 20px;

    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #ffffff;
    border-radius: 50%;

    animation:
        hs-message-modal-spin
        0.75s
        linear
        infinite;
}

.hs-message-modal-spinner[hidden],
[data-message-submit-text][hidden] {
    display: none;
}

@keyframes hs-message-modal-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 560px) {
    .hs-other-profile-actions {
        display: grid;
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        width: 100%;
    }

    .hs-other-profile-actions
    .hs-profile-action-button {
        width: 100%;
    }

    .hs-message-modal {
        align-items: flex-end;

        padding:
            12px
            12px
            calc(
                12px
                + env(safe-area-inset-bottom)
            );
    }

    .hs-message-modal-dialog {
        width: 100%;
        padding: 26px 17px 17px;

        border-radius: 20px;
    }

    .hs-message-modal-actions {
        grid-template-columns: 1fr;
    }

    .hs-message-modal-submit {
        order: -1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hs-message-modal,
    .hs-message-modal-dialog,
    .hs-other-profile-message-button {
        transition-duration: 0.01ms !important;
    }
}

/* =========================================================
   HEADER MESAJ BUTONU — KOYU TEMA
   ========================================================= */

.header-message-button {
    position: relative;
}

.header-message-button.has-unread-message {
    color: #7db5ff;
    border-color: rgba(96, 165, 250, 0.3);
    background: rgba(37, 99, 235, 0.15);
}

.header-message-button.has-unread-message:hover {
    color: #a8ceff;
    border-color: rgba(96, 165, 250, 0.42);
    background: rgba(37, 99, 235, 0.22);
}

.header-message-button.has-unread-message
.fa-message {
    animation:
        hs-header-message-pulse
        2.2s
        ease-in-out
        infinite;
}

.header-message-badge {
    background: #ef4444;
    color: #ffffff;

    box-shadow:
        0 0 0 2px var(--header-bg, #161b22),
        0 4px 10px rgba(239, 68, 68, 0.34);
}

@keyframes hs-header-message-pulse {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.08);
    }
}

@media (prefers-reduced-motion: reduce) {
    .header-message-button.has-unread-message
    .fa-message {
        animation: none;
    }
}

/* =========================================================
   MESAJLAR — SADECE KONUŞMA LİSTESİ
   ========================================================= */

.messages-list-page {
    display: block;

    width: 100%;
    max-width: 920px;
    margin: 0 auto;
}

.messages-list-card {
    width: 100%;

    overflow: hidden;

    border: 1px solid var(--border);
    border-radius: 18px;

    background: var(--surface);

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.06);
}

.messages-list-card
.messages-sidebar-header {
    padding: 20px 22px;

    border-bottom:
        1px solid var(--border);
}

.messages-list-card
.conversation-list {
    width: 100%;
}

.messages-list-card
.conversation-item {
    width: 100%;

    border-radius: 0;
}

.messages-list-card
.conversation-item:not(:last-child) {
    border-bottom:
        1px solid var(--border);
}

.messages-list-card
.messages-loading,
.messages-list-card
.messages-error,
.messages-list-card
.messages-empty {
    min-height: 220px;
}

@media (max-width: 850px) {
    .messages-list-page {
        max-width: none;
    }

    .messages-list-card {
        border-right: 0;
        border-left: 0;
        border-radius: 0;
    }
}

/* =========================================================
   İÇERİK PAYLAŞIM MODALI — KOYU TEMA
   ========================================================= */

.icerik-paylasim-bileseni {
    display: contents;
}

.icerik-paylasim-ac-butonu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    min-height: 38px;
    padding: 8px 12px;

    border: 1px solid #292929;
    border-radius: 11px;

    color: #b9b9b9;
    background: transparent;

    font: inherit;
    font-size: 12px;
    font-weight: 600;

    cursor: pointer;

    transition:
        color 0.18s ease,
        border-color 0.18s ease,
        background-color 0.18s ease,
        transform 0.18s ease;
}

.icerik-paylasim-ac-butonu:hover {
    color: #ff9900;
    border-color: rgba(255, 153, 0, 0.38);
    background: rgba(255, 153, 0, 0.1);

    transform: translateY(-1px);
}

.icerik-paylasim-ac-butonu svg {
    width: 18px;
    height: 18px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

body.icerik-paylasim-modal-acik {
    overflow: hidden;
}

.icerik-paylasim-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;

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

    padding: 20px;

    opacity: 0;

    transition:
        opacity 0.18s ease;
}

.icerik-paylasim-modal[hidden] {
    display: none;
}

.icerik-paylasim-modal.is-visible {
    opacity: 1;
}

.icerik-paylasim-modal-arkaplan {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;
    padding: 0;

    border: 0;

    background: rgba(0, 0, 0, 0.8);

    cursor: default;

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.icerik-paylasim-modal-kutu {
    position: relative;
    z-index: 1;

    display: flex;
    flex-direction: column;

    width: min(100%, 520px);
    max-height: min(760px, calc(100vh - 40px));

    overflow: hidden;

    border: 1px solid #252525;
    border-radius: 21px;

    background: #050505;

    box-shadow:
        0 30px 90px rgba(0, 0, 0, 0.82);

    transform:
        translateY(14px)
        scale(0.975);

    transition:
        transform 0.18s ease;
}

.icerik-paylasim-modal.is-visible
.icerik-paylasim-modal-kutu {
    transform:
        translateY(0)
        scale(1);
}

.icerik-paylasim-modal-baslik-alani {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;

    flex: 0 0 auto;

    padding: 20px 20px 17px;

    border-bottom: 1px solid #202020;

    background: #050505;
}

.icerik-paylasim-modal-baslik-grubu {
    min-width: 0;

    display: flex;
    align-items: center;
    gap: 13px;
}

.icerik-paylasim-modal-ikon {
    width: 44px;
    height: 44px;

    display: grid;
    place-items: center;

    flex: 0 0 44px;

    border: 1px solid rgba(255, 153, 0, 0.3);
    border-radius: 14px;

    color: #ff9900;
    background: rgba(255, 153, 0, 0.1);
}

.icerik-paylasim-modal-ikon svg {
    width: 22px;
    height: 22px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.icerik-paylasim-modal-baslik {
    margin: 0;

    color: #f3f3f3;

    font-size: 18px;
    line-height: 1.25;
    font-weight: 600;
}

.icerik-paylasim-modal-aciklama {
    margin: 4px 0 0;

    color: #858585;

    font-size: 11px;
    line-height: 1.4;
    font-weight: 550;
}

.icerik-paylasim-modal-kapat {
    width: 37px;
    height: 37px;

    display: grid;
    place-items: center;

    flex: 0 0 37px;

    padding: 0;

    border: 0;
    border-radius: 50%;

    color: #858585;
    background: transparent;

    cursor: pointer;

    transition:
        color 0.18s ease,
        background-color 0.18s ease,
        transform 0.18s ease;
}

.icerik-paylasim-modal-kapat:hover {
    color: #ffffff;
    background: #1a1a1a;

    transform: rotate(3deg);
}

.icerik-paylasim-modal-kapat svg {
    width: 19px;
    height: 19px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.icerik-paylasim-modal-govde {
    min-height: 0;
    overflow-y: auto;

    padding: 17px 20px 20px;

    background: #050505;

    scrollbar-width: thin;
    scrollbar-color: #383838 transparent;
}

.icerik-paylasim-arama-kapsayici {
    position: relative;

    display: flex;
    align-items: center;
}

.icerik-paylasim-arama-ikonu {
    position: absolute;
    left: 14px;
    z-index: 1;

    display: grid;
    place-items: center;

    color: #777777;

    pointer-events: none;
}

.icerik-paylasim-arama-ikonu svg {
    width: 18px;
    height: 18px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
}

.icerik-paylasim-arama-input {
    width: 100%;
    height: 46px;

    padding:
        0
        76px
        0
        43px;

    border: 1px solid #292929;
    border-radius: 13px;
    outline: 0;

    color: #f4f4f4;
    background: #101010;

    font: inherit;
    font-size: 13px;
    font-weight: 600;

    transition:
        border-color 0.18s ease,
        background-color 0.18s ease,
        box-shadow 0.18s ease;
}

.icerik-paylasim-arama-input:focus {
    border-color: rgba(255, 153, 0, 0.7);
    background: #111111;

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

.icerik-paylasim-arama-input::placeholder {
    color: #666666;
}

.icerik-paylasim-arama-input:disabled {
    opacity: 0.6;
}

.icerik-paylasim-arama-temizle {
    position: absolute;
    right: 10px;

    width: 29px;
    height: 29px;

    display: grid;
    place-items: center;

    padding: 0;

    border: 0;
    border-radius: 50%;

    color: #9a9a9a;
    background: #202020;

    cursor: pointer;
}

.icerik-paylasim-arama-temizle[hidden] {
    display: none;
}

.icerik-paylasim-arama-temizle svg {
    width: 15px;
    height: 15px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.icerik-paylasim-arama-yukleniyor {
    position: absolute;
    right: 45px;

    width: 17px;
    height: 17px;

    border: 2px solid #363636;
    border-top-color: #ff9900;
    border-radius: 50%;

    animation:
        icerik-paylasim-don
        0.7s
        linear
        infinite;
}

.icerik-paylasim-arama-yukleniyor[hidden] {
    display: none;
}

.icerik-paylasim-secim-ozeti {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    margin-top: 12px;
    padding: 10px 12px;

    border: 1px solid rgba(255, 153, 0, 0.25);
    border-radius: 11px;

    color: #ffc267;
    background: rgba(255, 153, 0, 0.08);

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

.icerik-paylasim-secim-ozeti[hidden] {
    display: none;
}

.icerik-paylasim-secimleri-temizle {
    padding: 0;

    border: 0;

    color: #ff9900;
    background: transparent;

    font: inherit;
    font-size: 10px;
    font-weight: 600;

    cursor: pointer;
}

.icerik-paylasim-liste-basligi {
    margin: 17px 2px 8px;

    color: #777777;

    font-size: 10px;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.icerik-paylasim-kullanici-listesi {
    display: grid;
    gap: 5px;
}

.icerik-paylasim-kullanici {
    display: grid;
    grid-template-columns:
        44px
        minmax(0, 1fr)
        28px;
    align-items: center;
    gap: 11px;

    min-height: 59px;
    padding: 7px 10px;

    border: 1px solid transparent;
    border-radius: 13px;

    background: transparent;

    cursor: pointer;

    transition:
        border-color 0.18s ease,
        background-color 0.18s ease,
        transform 0.18s ease;
}

.icerik-paylasim-kullanici:hover {
    border-color: #292929;
    background: #101010;

    transform: translateX(2px);
}

.icerik-paylasim-kullanici.is-selected {
    border-color: rgba(255, 153, 0, 0.42);
    background: rgba(255, 153, 0, 0.09);
}

.icerik-paylasim-kullanici-avatar {
    width: 44px;
    height: 44px;

    display: grid;
    place-items: center;

    overflow: hidden;

    border: 1px solid #292929;
    border-radius: 50%;

    color: #ff9900;
    background: #17110a;

    font-size: 15px;
    font-weight: 600;
}

.icerik-paylasim-kullanici-avatar img {
    width: 100%;
    height: 100%;

    display: block;
    object-fit: cover;
}

.icerik-paylasim-kullanici-bilgi {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 4px;
}

.icerik-paylasim-kullanici-bilgi strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    color: #e8e8e8;

    font-size: 12px;
    line-height: 1.25;
    font-weight: 600;
}

.icerik-paylasim-kullanici-bilgi > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    color: #777777;

    font-size: 9px;
    font-weight: 600;
}

.icerik-paylasim-checkbox {
    position: relative;

    width: 25px;
    height: 25px;
}

.icerik-paylasim-checkbox input {
    position: absolute;

    width: 1px;
    height: 1px;

    opacity: 0;
    pointer-events: none;
}

.icerik-paylasim-checkbox-gorunum {
    width: 25px;
    height: 25px;

    display: grid;
    place-items: center;

    border: 1px solid #3a3a3a;
    border-radius: 8px;

    color: transparent;
    background: #101010;

    transition:
        color 0.18s ease,
        border-color 0.18s ease,
        background-color 0.18s ease,
        transform 0.18s ease;
}

.icerik-paylasim-checkbox-gorunum svg {
    width: 16px;
    height: 16px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2.3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.icerik-paylasim-checkbox
input:checked
+ .icerik-paylasim-checkbox-gorunum {
    color: #050505;
    border-color: #ff9900;
    background: #ff9900;

    transform: scale(1.04);
}

.icerik-paylasim-yukleniyor,
.icerik-paylasim-hata,
.icerik-paylasim-bos {
    min-height: 160px;

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

    padding: 22px;

    color: #858585;

    font-size: 11px;
    line-height: 1.5;
    text-align: center;
}

.icerik-paylasim-yukleniyor[hidden],
.icerik-paylasim-hata[hidden],
.icerik-paylasim-bos[hidden] {
    display: none;
}

.icerik-paylasim-spinner {
    width: 25px;
    height: 25px;

    border: 3px solid #303030;
    border-top-color: #ff9900;
    border-radius: 50%;

    animation:
        icerik-paylasim-don
        0.75s
        linear
        infinite;
}

.icerik-paylasim-hata {
    color: #ff9e9e;
}

.icerik-paylasim-hata-ikonu {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(239, 68, 68, 0.35);
    border-radius: 50%;

    color: #ff6b6b;
    background: rgba(239, 68, 68, 0.11);

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

.icerik-paylasim-bos-ikon {
    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    border-radius: 15px;

    color: #777777;
    background: #151515;
}

.icerik-paylasim-bos-ikon svg {
    width: 25px;
    height: 25px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.icerik-paylasim-bos strong {
    color: #d2d2d2;

    font-size: 12px;
    font-weight: 600;
}

.icerik-paylasim-mesaj-alani {
    position: relative;

    margin-top: 18px;
}

.icerik-paylasim-mesaj-etiketi {
    display: flex;
    align-items: center;
    gap: 7px;

    margin: 0 0 7px 2px;

    color: #b0b0b0;

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

.icerik-paylasim-mesaj-etiketi span {
    color: #666666;

    font-size: 9px;
    font-weight: 600;
}

.icerik-paylasim-mesaj-input {
    display: block;

    width: 100%;
    min-height: 82px;
    max-height: 180px;

    padding: 12px 13px 28px;

    resize: vertical;

    border: 1px solid #292929;
    border-radius: 12px;
    outline: 0;

    color: #f1f1f1;
    background: #101010;

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

    transition:
        border-color 0.18s ease,
        background-color 0.18s ease,
        box-shadow 0.18s ease;
}

.icerik-paylasim-mesaj-input:focus {
    border-color: rgba(255, 153, 0, 0.7);
    background: #111111;

    box-shadow:
        0 0 0 3px rgba(255, 153, 0, 0.09);
}

.icerik-paylasim-mesaj-input::placeholder {
    color: #626262;
}

.icerik-paylasim-mesaj-sayaci {
    position: absolute;
    right: 11px;
    bottom: 8px;

    color: #666666;

    font-size: 9px;
    font-weight: 600;
}

.icerik-paylasim-gonderim-hatasi {
    margin-top: 11px;
    padding: 10px 12px;

    border: 1px solid rgba(239, 68, 68, 0.35);
    border-radius: 10px;

    color: #ffb4b4;
    background: rgba(239, 68, 68, 0.1);

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

.icerik-paylasim-gonderim-hatasi[hidden] {
    display: none;
}

.icerik-paylasim-modal-alt {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 10px;

    flex: 0 0 auto;

    padding: 15px 20px 18px;

    border-top: 1px solid #202020;

    background: #050505;
}

.icerik-paylasim-vazgec,
.icerik-paylasim-gonder {
    min-height: 43px;
    padding: 9px 14px;

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

    border-radius: 11px;

    font: inherit;
    font-size: 12px;
    font-weight: 600;

    cursor: pointer;

    transition:
        border-color 0.18s ease,
        background-color 0.18s ease,
        opacity 0.18s ease,
        transform 0.18s ease;
}

.icerik-paylasim-vazgec {
    border: 1px solid #2d2d2d;

    color: #c2c2c2;
    background: #131313;
}

.icerik-paylasim-vazgec:hover:not(:disabled) {
    border-color: #3a3a3a;
    background: #1a1a1a;

    transform: translateY(-1px);
}

.icerik-paylasim-gonder {
    border: 1px solid #ff9900;

    color: #050505;
    background: #ff9900;

    box-shadow:
        0 8px 20px rgba(255, 153, 0, 0.2);
}

.icerik-paylasim-gonder:hover:not(:disabled) {
    border-color: #ffab2e;
    background: #ffab2e;

    transform: translateY(-1px);
}

.icerik-paylasim-gonder.is-success {
    color: #ffffff;
    border-color: #16a34a;
    background: #16a34a;
}

.icerik-paylasim-vazgec:disabled,
.icerik-paylasim-gonder:disabled,
.icerik-paylasim-modal-kapat:disabled {
    opacity: 0.48;
    cursor: not-allowed;
    transform: none;
}

.icerik-paylasim-gonder-spinner {
    width: 19px;
    height: 19px;

    border: 2px solid rgba(5, 5, 5, 0.32);
    border-top-color: #050505;
    border-radius: 50%;

    animation:
        icerik-paylasim-don
        0.75s
        linear
        infinite;
}

.icerik-paylasim-gonder-spinner[hidden],
[data-icerik-paylasim-gonder-metni][hidden] {
    display: none;
}

@keyframes icerik-paylasim-don {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 580px) {
    .icerik-paylasim-modal {
        align-items: flex-end;

        padding:
            10px
            10px
            calc(
                10px
                + env(safe-area-inset-bottom)
            );
    }

    .icerik-paylasim-modal-kutu {
        width: 100%;
        max-height:
            calc(
                100dvh
                - 20px
                - env(safe-area-inset-bottom)
            );

        border-radius: 20px;
    }

    .icerik-paylasim-modal-baslik-alani {
        padding: 17px 15px 14px;
    }

    .icerik-paylasim-modal-govde {
        padding: 14px 15px 17px;
    }

    .icerik-paylasim-modal-alt {
        padding:
            13px
            15px
            calc(
                15px
                + env(safe-area-inset-bottom)
            );
    }

    .icerik-paylasim-ac-metni {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .icerik-paylasim-modal,
    .icerik-paylasim-modal-kutu,
    .icerik-paylasim-kullanici,
    .icerik-paylasim-ac-butonu {
        transition-duration: 0.01ms !important;
    }
}

/* =========================================================
   İÇERİK KARTI YORUM VE PAYLAŞIM
   ========================================================= */

.icerik-kart-etkilesim-sag {
    display: inline-flex;
    align-items: center;
    gap: 14px;

    margin-left: auto;
}

.icerik-kart-yorum,
.icerik-kart-paylas {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    min-width: 40px;
    min-height: 34px;
    padding: 5px 7px;

    border: 0;
    border-radius: 9px;

    color: #909090;
    background: transparent;

    font: inherit;
    font-size: 12px;
    line-height: 1;
    font-weight: 600;

    text-decoration: none;
    cursor: pointer;

    transition:
        color 0.18s ease,
        background-color 0.18s ease,
        transform 0.18s ease;
}

.icerik-kart-yorum:hover,
.icerik-kart-paylas:hover {
    color: #f1f1f1;
    background: #161616;

    transform: translateY(-1px);
}

.icerik-kart-yorum i,
.icerik-kart-paylas i {
    width: 19px;

    font-size: 18px;
    line-height: 1;

    text-align: center;
}

.icerik-kart-paylas:hover {
    color: #ff9900;
}

.icerik-kart-yorum span,
.icerik-kart-paylas span {
    min-width: 8px;

    color: inherit;

    font-size: 11px;
    line-height: 1;
    font-weight: 600;
}

@media (max-width: 580px) {
    .icerik-kart-etkilesim {
        gap: 10px;
    }

    .icerik-kart-etkilesim-sag {
        gap: 7px;
    }

    .icerik-kart-yorum,
    .icerik-kart-paylas {
        min-width: 36px;
        min-height: 32px;
        padding: 4px 6px;
    }

    .icerik-kart-yorum i,
    .icerik-kart-paylas i {
        font-size: 17px;
    }
}

.icerik-kart-etkilesim {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.icerik-kart-etkilesim-sag {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

.icerik-kart-yorum,
.icerik-kart-paylas {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* =========================================================
   İÇERİK PAYLAŞIM — ÖNİZLEME VE HARİCİ PLATFORMLAR
   ========================================================= */

.icerik-paylasim-onizleme {
    margin-bottom: 18px;

    overflow: hidden;

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

    background: #0b0b0b;
}

.icerik-paylasim-onizleme-yukleniyor {
    min-height: 180px;

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

    padding: 20px;

    color: #808080;

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

.icerik-paylasim-onizleme-icerik[hidden],
.icerik-paylasim-onizleme-hata[hidden],
.icerik-paylasim-onizleme-yukleniyor[hidden] {
    display: none;
}

.icerik-paylasim-onizleme-ust {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 11px 12px;

    border-bottom: 1px solid #222222;
}

.icerik-paylasim-onizleme-logo {
    width: 36px;
    height: 36px;

    display: grid;
    place-items: center;

    flex: 0 0 36px;

    border-radius: 11px;

    color: #050505;
    background: #ff9900;

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

.icerik-paylasim-onizleme-kimlik {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 3px;
}

.icerik-paylasim-onizleme-kimlik strong {
    color: #f1f1f1;

    font-size: 12px;
    font-weight: 600;
}

.icerik-paylasim-onizleme-kimlik span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    color: #858585;

    font-size: 10px;
    font-weight: 600;
}

.icerik-paylasim-onizleme-medya {
    position: relative;

    display: block;

    width: 100%;
    aspect-ratio: 16 / 9;

    overflow: hidden;

    color: inherit;
    background: #111111;

    text-decoration: none;
}

.icerik-paylasim-onizleme-medya img,
.icerik-paylasim-onizleme-medya video {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.icerik-paylasim-onizleme-medya-bos {
    position: absolute;
    inset: 0;

    display: grid;
    place-items: center;

    color: #717171;

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

.icerik-paylasim-onizleme-medya-bos[hidden] {
    display: none;
}

.icerik-paylasim-onizleme-bilgi {
    display: flex;
    flex-direction: column;
    gap: 5px;

    padding: 12px;
}

.icerik-paylasim-onizleme-mekan {
    display: block;

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

    color: #ededed;

    font-size: 13px;
    line-height: 1.35;
    font-weight: 600;
}

.icerik-paylasim-onizleme-adres {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;

    color: #7b7b7b;

    font-size: 10px;
    line-height: 1.45;
    font-weight: 550;
}

.icerik-paylasim-onizleme-hata {
    padding: 24px;

    color: #ffaaaa;
    background: rgba(239, 68, 68, 0.08);

    font-size: 11px;
    line-height: 1.5;
    text-align: center;
}

.icerik-paylasim-platform-bolumu {
    margin-bottom: 19px;
}

.icerik-paylasim-bolum-basligi {
    margin: 0 0 10px 2px;

    color: #a0a0a0;

    font-size: 11px;
    line-height: 1.3;
    font-weight: 600;
}

.icerik-paylasim-platformlar {
    display: grid;
    grid-template-columns:
        repeat(5, minmax(0, 1fr));
    gap: 8px;
}

.icerik-paylasim-platform {
    position: relative;

    min-width: 0;
    min-height: 76px;
    padding: 10px 5px;

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

    border: 1px solid #282828;
    border-radius: 13px;

    color: #b6b6b6;
    background: #101010;

    font: inherit;
    cursor: pointer;

    transition:
        border-color 0.18s ease,
        color 0.18s ease,
        background-color 0.18s ease,
        transform 0.18s ease;
}

.icerik-paylasim-platform:hover:not(:disabled) {
    border-color: #3a3a3a;
    background: #171717;

    transform: translateY(-2px);
}

.icerik-paylasim-platform i {
    font-size: 25px;
    line-height: 1;
}

.icerik-paylasim-platform span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    max-width: 100%;

    font-size: 9px;
    font-weight: 600;
}

.icerik-paylasim-platform.whatsapp {
    color: #39d675;
}

.icerik-paylasim-platform.instagram {
    color: #ef6aa8;
}

.icerik-paylasim-platform.x {
    color: #f0f0f0;
}

.icerik-paylasim-platform.telegram {
    color: #4bb7ef;
}

.icerik-paylasim-platform.is-loading {
    opacity: 0.55;
}

.icerik-paylasim-platform.is-loading::after {
    content: "";

    position: absolute;
    top: 7px;
    right: 7px;

    width: 12px;
    height: 12px;

    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;

    animation:
        icerik-paylasim-don
        0.7s
        linear
        infinite;
}

.icerik-paylasim-platform:disabled {
    cursor: not-allowed;
}

.icerik-paylasim-bolum-ayirici {
    display: flex;
    align-items: center;
    gap: 12px;

    margin: 4px 0 16px;

    color: #777777;

    font-size: 10px;
    font-weight: 600;
    text-align: center;
}

.icerik-paylasim-bolum-ayirici::before,
.icerik-paylasim-bolum-ayirici::after {
    content: "";

    height: 1px;
    flex: 1;

    background: #262626;
}

.icerik-paylasim-bolum-ayirici span {
    flex: 0 0 auto;
}

@media (max-width: 440px) {
    .icerik-paylasim-platformlar {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .icerik-paylasim-platform {
        min-height: 68px;
    }
}

.icerik-paylasim-platform.facebook {
    color: #5b9cff;
}

.hs-mekan-baslik-islemleri {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;

    flex: 0 0 auto;
}

.hs-mekan-baslik-islemleri .hs-mekan-bilgi-button {
    flex: 0 0 auto;
}

button.hs-mekan-bilgi-button {
    padding: 0;
    font: inherit;
    cursor: pointer;
}

/* =========================================================
   DİĞER PROFİL – ÜST SAĞ İŞLEM BUTONLARI
   ========================================================= */

.hs-other-profile-header-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;

    flex: 0 0 auto;
}

.hs-other-profile-share-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;
    padding: 0;

    flex: 0 0 40px;

    border: 1px solid #292929;
    border-radius: 50%;

    background: #111111;
    color: #f2f2f2;

    cursor: pointer;

    transition:
        color 0.18s ease,
        background-color 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease;
}

.hs-other-profile-share-button svg {
    width: 19px;
    height: 19px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;

    pointer-events: none;
}

.hs-other-profile-share-button:hover:not(:disabled) {
    border-color: #4a4a4a;
    background: #1b1b1b;
    color: #ffffff;

    box-shadow:
        0 5px 16px rgba(0, 0, 0, 0.34);

    transform: translateY(-1px);
}

.hs-other-profile-share-button:active:not(:disabled) {
    transform: translateY(0) scale(0.96);
}

.hs-other-profile-share-button:focus-visible {
    outline: none;

    box-shadow:
        0 0 0 3px rgba(255, 255, 255, 0.13);
}

.hs-other-profile-share-button:disabled,
.hs-other-profile-share-button.is-disabled {
    opacity: 0.38;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.hs-other-profile-header-actions
.hs-profile-settings {
    flex: 0 0 auto;
}

.hs-other-profile-header-actions
.hs-other-profile-menu-button {
    flex: 0 0 auto;
}

@media (max-width: 640px) {
    .hs-other-profile-header-actions {
        gap: 6px;
    }

    .hs-other-profile-share-button {
        width: 36px;
        height: 36px;

        flex-basis: 36px;
    }

    .hs-other-profile-share-button svg {
        width: 18px;
        height: 18px;
    }
}

/* =========================================================
   KENDİ PROFİLİM – PAYLAŞ BUTONU
   ========================================================= */

.hs-profile-name-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;

    width: 100%;
}

.hs-profile-name-group {
    min-width: 0;
    flex: 1 1 auto;
}

.hs-profile-share-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;
    padding: 0;

    flex: 0 0 40px;

    border: 1px solid #292929;
    border-radius: 50%;

    background: transparent;
    color: #f2f2f2;

    cursor: pointer;

    transition:
        color 0.18s ease,
        background-color 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease;
}

.hs-profile-share-button svg {
    width: 19px;
    height: 19px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;

    pointer-events: none;
}

.hs-profile-share-button:hover {
    border-color: #4a4a4a;

    background: #1b1b1b;
    color: #ffffff;

    box-shadow:
        0 5px 16px rgba(0, 0, 0, 0.34);

    transform: translateY(-1px);
}

.hs-profile-share-button:active {
    transform:
        translateY(0)
        scale(0.96);
}

.hs-profile-share-button:focus-visible {
    outline: none;

    box-shadow:
        0 0 0 3px rgba(255, 255, 255, 0.13);
}

@media (max-width: 640px) {
    .hs-profile-name-row {
        gap: 10px;
    }

    .hs-profile-share-button {
        width: 36px;
        height: 36px;

        flex-basis: 36px;
    }

    .hs-profile-share-button svg {
        width: 18px;
        height: 18px;
    }
}

/* =========================================================
   İÇERİK KARTI – KAYDET BUTONU
   ========================================================= */

.icerik-kart-kaydet {
    position: relative;

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

    width: 34px;
    height: 34px;
    min-width: 34px;
    padding: 0;

    border: 0;
    border-radius: 50%;

    background: transparent;
    color: #a7a7a7;

    font: inherit;
    cursor: pointer;

    transition:
        color 0.18s ease,
        background-color 0.18s ease,
        transform 0.18s ease,
        opacity 0.18s ease;
}

.icerik-kart-kaydet i {
    font-size: 18px;
    line-height: 1;

    pointer-events: none;

    transition:
        transform 0.18s ease,
        color 0.18s ease;
}

.icerik-kart-kaydet:hover:not(:disabled) {
    background: #1b1b1b;
    color: #ffffff;
}

.icerik-kart-kaydet:active:not(:disabled) {
    transform: scale(0.92);
}

.icerik-kart-kaydet.is-saved {
    color: #ffffff;
}

.icerik-kart-kaydet.is-saved i {
    transform: scale(1.04);
}

.icerik-kart-kaydet:focus-visible {
    outline: none;

    box-shadow:
        0 0 0 3px rgba(255, 255, 255, 0.14);
}

.icerik-kart-kaydet:disabled {
    cursor: wait;
    opacity: 0.5;
}

.icerik-kart-kaydet.is-loading i {
    animation:
        icerik-kaydet-pulse
        0.75s ease-in-out
        infinite alternate;
}

@keyframes icerik-kaydet-pulse {
    from {
        opacity: 0.4;
        transform: scale(0.88);
    }

    to {
        opacity: 1;
        transform: scale(1.05);
    }
}

.icerik-kart-etkilesim-sag {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
}

@media (max-width: 640px) {
    .icerik-kart-kaydet {
        width: 32px;
        height: 32px;
        min-width: 32px;
    }

    .icerik-kart-kaydet i {
        font-size: 17px;
    }

    .icerik-kart-etkilesim-sag {
        gap: 3px;
    }
}

.icerik-kart-gorsel video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    pointer-events: none;
    background: #000;
}

.icerik-kart-video-ikonu {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 52px;
    height: 52px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(0, 0, 0, 0.54);
    color: #fff;
    font-size: 18px;
    pointer-events: none;
    backdrop-filter: blur(6px);
}

.icerik-gorsel-modal-image-wrapper video {
    width: 100%;
    max-height: 72vh;
    object-fit: contain;
    background: #000;
}

.icerik-gorsel-modal-image[hidden] {
    display: none !important;
}

/* =========================================================
   KEŞFET HIZLI FİLTRE SWITCHLERİ - KOYU TEMA
========================================================= */

.kesfet-hizli-filtreler {
    position: absolute;
    top: 18px;
    left: 50%;
    z-index: 8;

    width: min(
        calc(100% - 32px),
        620px
    );

    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap: 12px;

    transform: translateX(-50%);
}

.kesfet-switch-filtre {
    min-width: 0;
    min-height: 46px;

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

    padding: 9px 12px 9px 14px;

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;

    background: rgba(38, 38, 38, 0.94);

    box-shadow:
        0 8px 26px rgba(0, 0, 0, 0.26);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    cursor: pointer;
    user-select: none;

    transition:
        border-color 0.2s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.kesfet-switch-filtre:hover {
    border-color: rgba(251, 146, 60, 0.34);

    background: rgba(44, 44, 44, 0.97);

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.34);
}

.kesfet-switch-filtre:active {
    transform: scale(0.99);
}

.kesfet-switch-metin {
    min-width: 0;

    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: #e5e7eb;

    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
}

.kesfet-switch-metin i {
    flex: 0 0 auto;

    color: #fb923c;
    font-size: 14px;
}

.kesfet-switch-metin span {
    min-width: 0;

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

.kesfet-switch {
    position: relative;
    flex: 0 0 auto;

    width: 42px;
    height: 24px;
}

.kesfet-switch input {
    position: absolute;

    width: 1px;
    height: 1px;

    opacity: 0;
    pointer-events: none;
}

.kesfet-switch-track {
    position: absolute;
    inset: 0;

    display: block;

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;

    background: #525252;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.kesfet-switch-thumb {
    position: absolute;
    top: 3px;
    left: 3px;

    width: 16px;
    height: 16px;

    display: block;

    border-radius: 50%;

    background: #f5f5f5;

    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.38);

    transition:
        transform 0.2s ease;
}

.kesfet-switch input:checked +
.kesfet-switch-track {
    border-color: #f97316;
    background: #f97316;

    box-shadow:
        0 0 0 3px rgba(249, 115, 22, 0.18);
}

.kesfet-switch input:checked +
.kesfet-switch-track
.kesfet-switch-thumb {
    transform: translateX(18px);
}

.kesfet-switch input:focus-visible +
.kesfet-switch-track {
    outline: 3px solid rgba(251, 146, 60, 0.24);
    outline-offset: 2px;
}

/*
 * Filtre satırı kategori alanının üzerinde.
 */
.kesfet-kategori-paneli {
    top: 78px;
}

@media (max-width: 680px) {
    .kesfet-hizli-filtreler {
        top: 12px;

        width: calc(100% - 24px);
        gap: 8px;
    }

    .kesfet-switch-filtre {
        min-height: 42px;

        padding:
            8px
            9px
            8px
            10px;

        gap: 7px;

        border-radius: 12px;
    }

    .kesfet-switch-metin {
        gap: 6px;

        font-size: 11px;
    }

    .kesfet-switch-metin i {
        font-size: 12px;
    }

    .kesfet-switch {
        width: 36px;
        height: 21px;
    }

    .kesfet-switch-thumb {
        top: 3px;
        left: 3px;

        width: 13px;
        height: 13px;
    }

    .kesfet-switch input:checked +
    .kesfet-switch-track
    .kesfet-switch-thumb {
        transform: translateX(15px);
    }

    .kesfet-kategori-paneli {
        top: 66px;
    }
}

@media (max-width: 390px) {
    .kesfet-hizli-filtreler {
        width: calc(100% - 16px);
        gap: 6px;
    }

    .kesfet-switch-filtre {
        padding-right: 7px;
        padding-left: 8px;
    }

    .kesfet-switch-metin {
        font-size: 10px;
    }
}

/* =========================================================
   ÜYE İSTATİSTİKLERİ - KOYU TEMA
========================================================= */

.uye-istatistikleri {
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
    margin: 0 auto;
    padding: 22px 0 48px;

    color: #f5f5f5;
}

.uye-istatistikleri-icerik {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.uye-istatistikleri-hero {
    display: flex;
    align-items: center;
    gap: 18px;

    padding: 24px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 22px;

    background:
        radial-gradient(
            circle at top right,
            rgba(249, 115, 22, 0.15),
            transparent 42%
        ),
        #050505;

    box-shadow:
        0 14px 36px rgba(0, 0, 0, 0.34);
}

.uye-istatistikleri-hero-icon {
    flex: 0 0 auto;

    width: 58px;
    height: 58px;

    display: grid;
    place-items: center;

    border-radius: 18px;

    background: rgba(249, 115, 22, 0.16);
    color: #fb923c;

    font-size: 23px;
}

.uye-istatistikleri-hero-metin {
    min-width: 0;
}

.uye-istatistikleri-hero-metin > span,
.uye-istatistik-bolum-kicker {
    display: block;

    margin-bottom: 5px;

    color: #fb923c;

    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.uye-istatistikleri-hero-metin h2 {
    margin: 0;

    color: #f8fafc;

    font-size: clamp(20px, 3vw, 28px);
    font-weight: 600;
    line-height: 1.18;
}

.uye-istatistikleri-hero-metin p {
    max-width: 700px;

    margin: 8px 0 0;

    color: #a3a3a3;

    font-size: 14px;
    line-height: 1.6;
}

.uye-istatistik-bolumu,
.uye-istatistik-mekan-bolumu {
    padding: 22px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 22px;

    background: #050505;

    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.32);
}

.uye-istatistik-bolum-baslik {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    margin-bottom: 18px;
}

.uye-istatistik-bolum-baslik h3 {
    margin: 0;

    color: #f5f5f5;

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

.uye-istatistik-dogrulandi {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 7px 10px;

    border: 1px solid rgba(52, 211, 153, 0.16);
    border-radius: 999px;

    background: rgba(16, 185, 129, 0.1);
    color: #34d399;

    font-size: 12px;
    font-weight: 600;
}

.uye-istatistik-mekan-karti {
    min-width: 0;

    display: flex;
    align-items: center;
    gap: 14px;

    padding: 15px;

    border: 1px solid rgba(249, 115, 22, 0.22);
    border-radius: 17px;

    background: #0d0d0d;

    text-decoration: none;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease;
}

.uye-istatistik-mekan-karti:hover {
    transform: translateY(-2px);

    border-color: rgba(251, 146, 60, 0.46);
    background: #111111;

    box-shadow:
        0 14px 28px rgba(0, 0, 0, 0.4);
}

.uye-istatistik-mekan-icon {
    flex: 0 0 auto;

    width: 44px;
    height: 44px;

    display: grid;
    place-items: center;

    border-radius: 14px;

    background: #f97316;
    color: #ffffff;

    font-size: 17px;
}

.uye-istatistik-mekan-metin {
    min-width: 0;
    flex: 1;

    display: flex;
    flex-direction: column;
    gap: 5px;
}

.uye-istatistik-mekan-metin strong,
.uye-istatistik-mekan-metin span {
    display: block;
    min-width: 0;

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

.uye-istatistik-mekan-metin strong {
    color: #f5f5f5;

    font-size: 15px;
    font-weight: 600;
}

.uye-istatistik-mekan-metin span {
    color: #a3a3a3;

    font-size: 13px;
}

.uye-istatistik-mekan-ok {
    flex: 0 0 auto;

    color: #fb923c;

    font-size: 13px;
}

.uye-istatistik-kart-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 12px;
}

.uye-istatistik-karti {
    min-width: 0;
    min-height: 154px;

    display: flex;
    flex-direction: column;

    padding: 16px;

    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 18px;

    background: #0b0b0b;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease;
}

.uye-istatistik-karti:hover {
    transform: translateY(-3px);

    border-color: rgba(251, 146, 60, 0.28);
    background: #101010;

    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.38);
}

.uye-istatistik-karti-ust {
    display: flex;
    align-items: center;
    gap: 9px;
}

.uye-istatistik-karti-icon {
    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    border-radius: 11px;

    background: rgba(249, 115, 22, 0.16);
    color: #fb923c;

    font-size: 14px;
}

.uye-istatistik-karti-label {
    color: #a3a3a3;

    font-size: 12px;
    font-weight: 600;
}

.uye-istatistik-karti-value {
    display: block;

    margin-top: auto;
    padding-top: 18px;

    color: #fafafa;

    font-size: clamp(24px, 3vw, 32px);
    font-weight: 700;
    line-height: 1;
}

.uye-istatistik-karti-description {
    display: block;

    margin-top: 8px;

    color: #737373;

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

.uye-istatistik-konum-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 12px;
}

.uye-istatistik-konum-karti {
    min-width: 0;

    display: flex;
    align-items: center;
    gap: 13px;

    padding: 16px;

    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 17px;

    background: #0b0b0b;
}

.uye-istatistik-konum-icon {
    flex: 0 0 auto;

    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    border-radius: 13px;

    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
}

.uye-istatistik-konum-bilgi {
    min-width: 0;
    flex: 1;
}

.uye-istatistik-konum-bilgi span {
    display: block;

    margin-bottom: 4px;

    color: #a3a3a3;

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

.uye-istatistik-konum-bilgi strong {
    display: block;
    min-width: 0;

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

    color: #f5f5f5;

    font-size: 15px;
    font-weight: 600;
}

.uye-istatistik-konum-adet {
    flex: 0 0 auto;

    padding: 7px 9px;

    border: 1px solid rgba(129, 140, 248, 0.14);
    border-radius: 999px;

    background: rgba(99, 102, 241, 0.13);
    color: #a5b4fc;

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

.uye-istatistikleri-mesaj {
    min-height: 280px;

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

    padding: 30px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 22px;

    background: #050505;

    text-align: center;
}

.uye-istatistikleri-mesaj-icon {
    width: 54px;
    height: 54px;

    display: grid;
    place-items: center;

    margin-bottom: 15px;

    border-radius: 17px;

    background: rgba(249, 115, 22, 0.16);
    color: #fb923c;

    font-size: 21px;
}

.uye-istatistikleri-mesaj strong {
    color: #f5f5f5;

    font-size: 17px;
}

.uye-istatistikleri-mesaj span {
    max-width: 440px;

    margin-top: 7px;

    color: #a3a3a3;

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

.uye-istatistikleri-tekrar {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    margin-top: 18px;
    padding: 10px 14px;

    border: 0;
    border-radius: 12px;

    background: #f97316;
    color: #ffffff;

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

    cursor: pointer;
}

.uye-istatistikleri-skeleton {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.uye-istatistikleri-skeleton-hero,
.uye-istatistikleri-skeleton-wide,
.uye-istatistikleri-skeleton-card {
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 20px;

    background: #050505;
}

.uye-istatistikleri-skeleton-hero {
    display: flex;
    align-items: center;
    gap: 16px;

    min-height: 132px;

    padding: 24px;
}

.uye-istatistikleri-skeleton-icon {
    width: 58px;
    height: 58px;

    flex: 0 0 auto;

    border-radius: 18px;
}

.uye-istatistikleri-skeleton-lines {
    flex: 1;

    display: flex;
    flex-direction: column;
    gap: 11px;
}

.uye-istatistikleri-skeleton-lines span {
    display: block;

    height: 16px;
    border-radius: 8px;
}

.uye-istatistikleri-skeleton-lines span:first-child {
    width: 42%;
}

.uye-istatistikleri-skeleton-lines span:last-child {
    width: 72%;
}

.uye-istatistikleri-skeleton-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 12px;
}

.uye-istatistikleri-skeleton-grid.iki {
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
}

.uye-istatistikleri-skeleton-card {
    height: 154px;
}

.uye-istatistikleri-skeleton-wide {
    height: 108px;
}

.uye-istatistikleri-skeleton-icon,
.uye-istatistikleri-skeleton-lines span,
.uye-istatistikleri-skeleton-card,
.uye-istatistikleri-skeleton-wide {
    background:
        linear-gradient(
            90deg,
            #0b0b0b 25%,
            #171717 50%,
            #0b0b0b 75%
        );

    background-size: 220% 100%;

    animation:
        uye-istatistik-shimmer-dark
        1.35s
        linear
        infinite;
}

@keyframes uye-istatistik-shimmer-dark {
    from {
        background-position: 200% 0;
    }

    to {
        background-position: -20% 0;
    }
}

@media (max-width: 850px) {
    .uye-istatistik-kart-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .uye-istatistikleri {
        padding-top: 14px;
    }

    .uye-istatistikleri-hero,
    .uye-istatistik-bolumu,
    .uye-istatistik-mekan-bolumu {
        padding: 17px;

        border-radius: 18px;
    }

    .uye-istatistikleri-hero {
        align-items: flex-start;
    }

    .uye-istatistikleri-hero-icon {
        width: 48px;
        height: 48px;

        border-radius: 15px;

        font-size: 19px;
    }

    .uye-istatistik-konum-grid,
    .uye-istatistikleri-skeleton-grid.iki {
        grid-template-columns:
            minmax(0, 1fr);
    }
}

@media (max-width: 440px) {
    .uye-istatistik-kart-grid,
    .uye-istatistikleri-skeleton-grid {
        grid-template-columns:
            minmax(0, 1fr);
    }

    .uye-istatistik-karti {
        min-height: 134px;
    }

    .uye-istatistik-konum-karti {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .uye-istatistik-konum-adet {
        margin-left: 55px;
    }
}

/* =========================================================
   PROFİL SEKME YAPISI
========================================================= */

.profile-tab-page {
    width: 100%;
}

.profile-tabs {
    width: 80%;
    margin: 0 auto 22px;
}

.profile-tabs .hs-mekan-tabs-scroll {
    width: 100%;

    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    align-items: stretch;
}

.profile-tabs .hs-mekan-tab {
    width: 100%;
    min-width: 0;
    min-height: 52px;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 9px;

    padding: 12px 10px;

    white-space: nowrap;
}

.profile-tabs .hs-mekan-tab i {
    flex: 0 0 auto;

    font-size: 15px;
    line-height: 1;
}

.profile-tabs .hs-mekan-tab span {
    display: inline-block;

    font-size: 14px;
    line-height: 1;
}

.profile-tab-paneller {
    width: 100%;
}

.profile-tab-panel {
    width: 100%;
}

.profile-tab-panel[hidden] {
    display: none !important;
}

@media (max-width: 700px) {
    .profile-tabs {
        width: 94%;
        margin-bottom: 16px;
    }

    .profile-tabs .hs-mekan-tab {
        min-height: 46px;
        gap: 6px;

        padding: 10px 5px;
    }

    .profile-tabs .hs-mekan-tab i {
        font-size: 13px;
    }

    .profile-tabs .hs-mekan-tab span {
        font-size: 12px;
    }
}

@media (max-width: 390px) {
    .profile-tabs {
        width: 98%;
    }

    .profile-tabs .hs-mekan-tab {
        gap: 5px;
        padding-right: 3px;
        padding-left: 3px;
    }

    .profile-tabs .hs-mekan-tab i {
        font-size: 12px;
    }

    .profile-tabs .hs-mekan-tab span {
        font-size: 11px;
    }
}

/* =========================================================
   ÜYE PROFİLİ - KONUM VE SEKME YAPISI - KOYU TEMA
========================================================= */

.hs-other-profile-location {
    width: fit-content;
    max-width: 100%;

    display: inline-flex;
    align-items: center;
    gap: 7px;

    margin: 14px 0 0;
    padding: 8px 11px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;

    background: #0b0b0b;
    color: #a3a3a3;

    font-size: 13px;
    font-weight: 600;
    line-height: 1;
}

.hs-other-profile-location i {
    flex: 0 0 auto;

    color: #fb923c;
    font-size: 13px;
}

.hs-other-profile-location span {
    min-width: 0;
    max-width: 340px;

    display: block;

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

.profile-tab-page {
    width: 100%;
}

.profile-tabs {
    width: 80%;
    margin: 0 auto 22px;
}

.profile-tabs .hs-mekan-tabs-scroll {
    width: 100%;

    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    align-items: stretch;

    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.profile-tabs .hs-mekan-tab {
    position: relative;

    width: 100%;
    min-width: 0;
    min-height: 52px;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 9px;

    padding: 12px 10px;

    border: 0;
    border-radius: 0;

    background: transparent;
    color: #8f8f8f;

    font-family: inherit;
    white-space: nowrap;

    cursor: pointer;

    transition:
        color 0.2s ease,
        background-color 0.2s ease;
}

.profile-tabs .hs-mekan-tab::after {
    content: "";

    position: absolute;
    right: 16%;
    bottom: -1px;
    left: 16%;

    height: 2px;

    border-radius: 999px;

    background: transparent;

    transition:
        background-color 0.2s ease,
        right 0.2s ease,
        left 0.2s ease;
}

.profile-tabs .hs-mekan-tab:hover {
    color: #f5f5f5;
    background: rgba(255, 255, 255, 0.025);
}

.profile-tabs .hs-mekan-tab.active {
    color: #fb923c;
}

.profile-tabs .hs-mekan-tab.active::after {
    right: 8%;
    left: 8%;

    background: #f97316;
}

.profile-tabs .hs-mekan-tab i {
    flex: 0 0 auto;

    font-size: 15px;
    line-height: 1;
}

.profile-tabs .hs-mekan-tab span {
    display: inline-block;

    font-size: 14px;
    font-weight: 600;
    line-height: 1;
}

.profile-tab-paneller,
.profile-tab-panel {
    width: 100%;
}

.profile-tab-panel[hidden] {
    display: none !important;
}

@media (max-width: 700px) {
    .hs-other-profile-location {
        margin-top: 11px;
        padding: 7px 10px;

        font-size: 12px;
    }

    .hs-other-profile-location span {
        max-width: 250px;
    }

    .profile-tabs {
        width: 94%;
        margin-bottom: 16px;
    }

    .profile-tabs .hs-mekan-tab {
        min-height: 46px;
        gap: 6px;

        padding: 10px 5px;
    }

    .profile-tabs .hs-mekan-tab i {
        font-size: 13px;
    }

    .profile-tabs .hs-mekan-tab span {
        font-size: 12px;
    }
}

@media (max-width: 390px) {
    .hs-other-profile-location span {
        max-width: 210px;
    }

    .profile-tabs {
        width: 98%;
    }

    .profile-tabs .hs-mekan-tab {
        gap: 5px;
        padding-right: 3px;
        padding-left: 3px;
    }

    .profile-tabs .hs-mekan-tab i {
        font-size: 12px;
    }

    .profile-tabs .hs-mekan-tab span {
        font-size: 11px;
    }
}

/* =========================================================
   KONUM SEÇİCİ - KONUM DEĞİŞTİR YAZISI
   KOYU TEMA
========================================================= */

.konum-secici-degistir {
    flex: 0 0 auto;

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

    margin-left: 10px;
    padding: 6px 9px;

    border: 1px solid rgba(251, 146, 60, 0.2);
    border-radius: 999px;

    background: rgba(249, 115, 22, 0.11);
    color: #fb923c;

    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.01em;

    white-space: nowrap;

    transition:
        color 0.18s ease,
        border-color 0.18s ease,
        background-color 0.18s ease,
        transform 0.18s ease;
}

.konum-secici-degistir[hidden] {
    display: none !important;
}

.konum-secici-button:hover
.konum-secici-degistir {
    border-color: rgba(251, 146, 60, 0.4);
    background: rgba(249, 115, 22, 0.17);
    color: #fdba74;
}

.konum-secici-button:active
.konum-secici-degistir {
    transform: scale(0.97);
}

.konum-secici-ok {
    margin-left: 3px;
}

@media (max-width: 560px) {
    .konum-secici-degistir {
        margin-left: 6px;
        padding: 5px 7px;

        font-size: 9px;
    }
}

@media (max-width: 390px) {
    .konum-secici-degistir {
        max-width: 88px;

        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* =========================================================
   MESAJ - ŞİKÂYET ET VE ENGELLE
   KOYU TEMA
========================================================= */

.mesaj-baslik-sag-alan {
    flex: 0 0 auto;

    display: flex;
    align-items: center;

    margin-left: auto;
}

.mesaj-sikayet-engelle-button {
    min-height: 38px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    padding: 8px 11px;

    border: 1px solid rgba(248, 113, 113, 0.2);
    border-radius: 12px;

    background: rgba(220, 38, 38, 0.1);
    color: #f87171;

    font-family: inherit;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;

    cursor: pointer;

    transition:
        color 0.18s ease,
        border-color 0.18s ease,
        background-color 0.18s ease,
        transform 0.18s ease;
}

.mesaj-sikayet-engelle-button[hidden] {
    display: none !important;
}

.mesaj-sikayet-engelle-button svg {
    width: 17px;
    height: 17px;

    flex: 0 0 auto;
}

.mesaj-sikayet-engelle-button:hover {
    transform: translateY(-1px);

    border-color: rgba(248, 113, 113, 0.4);
    background: rgba(220, 38, 38, 0.17);
    color: #fca5a5;
}

.mesaj-sikayet-engelle-button:active {
    transform: scale(0.97);
}

body.mesaj-sikayet-modal-acik {
    overflow: hidden;
}

.mesaj-sikayet-engelle-modal {
    position: fixed;
    z-index: 10050;
    inset: 0;

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

    padding: 20px;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 0.18s ease,
        visibility 0.18s ease;
}

.mesaj-sikayet-engelle-modal[hidden] {
    display: none !important;
}

.mesaj-sikayet-engelle-modal.acik {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.mesaj-sikayet-engelle-backdrop {
    position: absolute;
    inset: 0;

    background: rgba(0, 0, 0, 0.76);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.mesaj-sikayet-engelle-dialog {
    position: relative;
    z-index: 1;

    width: min(100%, 430px);

    padding: 25px;

    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 24px;

    background: #050505;

    box-shadow:
        0 28px 75px rgba(0, 0, 0, 0.62);

    transform: translateY(12px) scale(0.98);

    transition:
        transform 0.2s ease;
}

.mesaj-sikayet-engelle-modal.acik
.mesaj-sikayet-engelle-dialog {
    transform: translateY(0) scale(1);
}

.mesaj-sikayet-engelle-kapat {
    position: absolute;
    top: 14px;
    right: 14px;

    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    padding: 0;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 11px;

    background: #111111;
    color: #a3a3a3;

    cursor: pointer;
}

.mesaj-sikayet-engelle-kapat svg {
    width: 17px;
    height: 17px;
}

.mesaj-sikayet-engelle-ikon {
    width: 58px;
    height: 58px;

    display: grid;
    place-items: center;

    margin-bottom: 17px;

    border: 1px solid rgba(248, 113, 113, 0.2);
    border-radius: 18px;

    background: rgba(220, 38, 38, 0.13);
    color: #f87171;
}

.mesaj-sikayet-engelle-ikon svg {
    width: 27px;
    height: 27px;
}

.mesaj-sikayet-engelle-metin {
    padding-right: 28px;
}

.mesaj-sikayet-engelle-etiket {
    display: block;

    margin-bottom: 6px;

    color: #f87171;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.mesaj-sikayet-engelle-metin h2 {
    margin: 0;

    color: #f5f5f5;

    font-size: 20px;
    line-height: 1.25;
    font-weight: 600;
}

.mesaj-sikayet-engelle-metin p {
    margin: 10px 0 0;

    color: #a3a3a3;

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

.mesaj-sikayet-engelle-metin p strong {
    color: #e5e5e5;
}

.mesaj-sikayet-engelle-uyari {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    margin-top: 18px;
    padding: 12px;

    border: 1px solid rgba(251, 191, 36, 0.16);
    border-radius: 14px;

    background: rgba(245, 158, 11, 0.09);
    color: #fbbf24;
}

.mesaj-sikayet-engelle-uyari svg {
    width: 18px;
    height: 18px;

    flex: 0 0 auto;

    margin-top: 1px;
}

.mesaj-sikayet-engelle-uyari span {
    font-size: 10px;
    line-height: 1.5;
    font-weight: 600;
}

.mesaj-sikayet-engelle-form {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1.35fr);

    gap: 10px;

    margin-top: 20px;
}

.mesaj-sikayet-engelle-vazgec,
.mesaj-sikayet-engelle-onay {
    min-height: 43px;

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

    padding: 10px 13px;

    border-radius: 13px;

    font-family: inherit;
    font-size: 11px;
    font-weight: 600;

    cursor: pointer;
}

.mesaj-sikayet-engelle-vazgec {
    border: 1px solid rgba(255, 255, 255, 0.09);

    background: #111111;
    color: #d4d4d4;
}

.mesaj-sikayet-engelle-onay {
    border: 1px solid #dc2626;

    background: #dc2626;
    color: #ffffff;

    box-shadow:
        0 10px 22px rgba(220, 38, 38, 0.22);
}

.mesaj-sikayet-engelle-onay:hover {
    background: #ef4444;
    border-color: #ef4444;
}

.mesaj-sikayet-engelle-onay:disabled,
.mesaj-sikayet-engelle-vazgec:disabled,
.mesaj-sikayet-engelle-kapat:disabled {
    opacity: 0.55;
    cursor: wait;
}

@media (max-width: 620px) {
    .mesaj-sikayet-engelle-button {
        width: 38px;
        height: 38px;
        min-height: 38px;

        padding: 0;
    }

    .mesaj-sikayet-engelle-button span {
        display: none;
    }

    .mesaj-sikayet-engelle-dialog {
        width: min(100%, 410px);

        padding: 21px;

        border-radius: 21px;
    }
}

@media (max-width: 390px) {
    .mesaj-sikayet-engelle-modal {
        align-items: flex-end;

        padding: 10px;
    }

    .mesaj-sikayet-engelle-dialog {
        width: 100%;

        padding: 20px 17px 17px;

        border-radius: 22px 22px 16px 16px;
    }

    .mesaj-sikayet-engelle-form {
        grid-template-columns: 1fr;
    }

    .mesaj-sikayet-engelle-vazgec {
        order: 2;
    }

    .mesaj-sikayet-engelle-onay {
        order: 1;
    }
}

/* =========================================================
   PROFİL RESMİ — AVATAR SEÇİM ALANI — KOYU TEMA
   Mevcut koyu.css dosyasının altına ekle
========================================================= */

.profil-avatar-karti {
    width: 100%;
    margin-top: 22px;
    padding: 22px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;

    background: #050505;

    box-shadow:
        0 14px 34px rgba(0, 0, 0, 0.42);
}

.profil-avatar-baslik-alani {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;

    margin-bottom: 18px;
}

.profil-avatar-rozet {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    margin-bottom: 8px;
    padding: 6px 9px;

    border: 1px solid rgba(251, 146, 60, 0.2);
    border-radius: 999px;

    background: rgba(249, 115, 22, 0.11);
    color: #fb923c;

    font-size: 9px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.profil-avatar-baslik-alani h2 {
    margin: 0;

    color: #f5f5f5;

    font-size: 18px;
    line-height: 1.25;
    font-weight: 600;
}

.profil-avatar-baslik-alani p {
    max-width: 580px;

    margin: 7px 0 0;

    color: #a3a3a3;

    font-size: 11px;
    line-height: 1.55;
    font-weight: 500;
}

.profil-avatar-sayisi {
    flex: 0 0 auto;

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

    min-height: 32px;
    padding: 7px 10px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;

    background: #111111;
    color: #a3a3a3;

    font-size: 9px;
    font-weight: 600;
    white-space: nowrap;
}

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

.profil-avatar-secenek {
    position: relative;

    width: 100%;
    aspect-ratio: 1 / 1;

    display: block;
    overflow: hidden;

    padding: 0;

    border: 2px solid transparent;
    border-radius: 18px;

    background: #111111;

    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.35);

    cursor: pointer;

    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}

.profil-avatar-secenek:hover {
    transform: translateY(-2px);

    border-color: rgba(251, 146, 60, 0.32);

    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.5);
}

.profil-avatar-secenek:focus-visible {
    outline: 3px solid rgba(251, 146, 60, 0.25);
    outline-offset: 3px;
}

.profil-avatar-secenek.secili {
    border-color: #fb923c;

    box-shadow:
        0 0 0 4px rgba(249, 115, 22, 0.14),
        0 12px 28px rgba(0, 0, 0, 0.55);
}

.profil-avatar-secenek img {
    width: 100%;
    height: 100%;

    display: block;
    object-fit: cover;

    transition:
        transform 0.2s ease;
}

.profil-avatar-secenek:hover img {
    transform: scale(1.035);
}

.profil-avatar-secim-isareti {
    position: absolute;
    top: 8px;
    right: 8px;

    width: 25px;
    height: 25px;

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

    border: 2px solid #050505;
    border-radius: 50%;

    background: #f97316;
    color: #ffffff;

    font-size: 10px;

    opacity: 0;
    transform: scale(0.72);

    box-shadow:
        0 6px 14px rgba(0, 0, 0, 0.48);

    transition:
        opacity 0.18s ease,
        transform 0.18s ease;
}

.profil-avatar-secenek.secili
.profil-avatar-secim-isareti {
    opacity: 1;
    transform: scale(1);
}

@media (max-width: 900px) {
    .profil-avatar-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .profil-avatar-karti {
        margin-top: 17px;
        padding: 17px;

        border-radius: 20px;
    }

    .profil-avatar-baslik-alani {
        gap: 10px;
        margin-bottom: 15px;
    }

    .profil-avatar-baslik-alani h2 {
        font-size: 16px;
    }

    .profil-avatar-sayisi {
        display: none;
    }

    .profil-avatar-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 9px;
    }

    .profil-avatar-secenek {
        border-radius: 15px;
    }

    .profil-avatar-secim-isareti {
        top: 6px;
        right: 6px;

        width: 23px;
        height: 23px;
    }
}

@media (max-width: 360px) {
    .profil-avatar-karti {
        padding: 14px;
    }

    .profil-avatar-grid {
        gap: 7px;
    }

    .profil-avatar-secenek {
        border-radius: 13px;
    }
}

/* =========================================================
   İŞLETME YÖNLENDİRME — KOYU TEMA
   ========================================================= */

.hs-business-intro-page {
    width: min(100%, 1050px);
    margin: 0 auto;
    padding: 4px 0 120px;
}

.hs-business-intro-hero {
    position: relative;

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

    width: 100%;
    padding: 30px;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 28px;

    background:
        linear-gradient(
            135deg,
            #050505 0%,
            #17100a 100%
        );

    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.5);
}

.hs-business-intro-hero::after {
    content: "";

    position: absolute;
    top: -90px;
    right: -70px;

    width: 250px;
    height: 250px;

    border-radius: 50%;

    background: rgba(249, 115, 22, 0.09);
}

.hs-business-intro-hero-content {
    position: relative;
    z-index: 1;

    min-width: 0;
    max-width: 720px;
}

.hs-business-intro-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 13px;
    padding: 7px 11px;

    border: 1px solid rgba(251, 146, 60, 0.2);
    border-radius: 999px;

    background: rgba(249, 115, 22, 0.11);
    color: #fb923c;

    font-size: 10px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.hs-business-intro-hero h1 {
    max-width: 680px;

    margin: 0;

    color: #f5f5f5;

    font-size: clamp(25px, 4vw, 38px);
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -0.035em;
}

.hs-business-intro-hero p {
    max-width: 660px;

    margin: 15px 0 0;

    color: #a3a3a3;

    font-size: 13px;
    line-height: 1.7;
    font-weight: 500;
}

.hs-business-intro-hero-icon {
    position: relative;
    z-index: 1;

    flex: 0 0 auto;

    width: 100px;
    height: 100px;

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

    border: 1px solid rgba(251, 146, 60, 0.17);
    border-radius: 28px;

    background: rgba(255, 255, 255, 0.045);
    color: #fb923c;

    font-size: 39px;

    box-shadow:
        0 18px 34px rgba(0, 0, 0, 0.4);

    transform: rotate(3deg);
}

.hs-business-intro-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;

    margin-top: 20px;
}

.hs-business-intro-card {
    position: relative;

    min-width: 0;
    min-height: 100%;

    display: flex;
    flex-direction: column;

    padding: 24px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 25px;

    background: #050505;

    box-shadow:
        0 14px 34px rgba(0, 0, 0, 0.42);

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.hs-business-intro-card:hover {
    transform: translateY(-3px);

    border-color: rgba(255, 255, 255, 0.14);

    box-shadow:
        0 20px 42px rgba(0, 0, 0, 0.58);
}

.hs-business-intro-card-icon {
    width: 51px;
    height: 51px;

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

    margin-bottom: 18px;

    border-radius: 16px;

    font-size: 20px;
}

.hs-business-intro-card-advertisement
.hs-business-intro-card-icon {
    border: 1px solid rgba(251, 146, 60, 0.18);

    background: rgba(249, 115, 22, 0.11);
    color: #fb923c;
}

.hs-business-intro-card-application
.hs-business-intro-card-icon {
    border: 1px solid rgba(96, 165, 250, 0.17);

    background: rgba(37, 99, 235, 0.12);
    color: #60a5fa;
}

.hs-business-intro-card-content {
    flex: 1;
}

.hs-business-intro-card-label {
    display: block;

    margin-bottom: 7px;

    color: #737373;

    font-size: 9px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.hs-business-intro-card h2 {
    margin: 0;

    color: #f5f5f5;

    font-size: 19px;
    line-height: 1.32;
    font-weight: 600;
    letter-spacing: -0.015em;
}

.hs-business-intro-card p {
    margin: 11px 0 0;

    color: #a3a3a3;

    font-size: 11px;
    line-height: 1.65;
    font-weight: 500;
}

.hs-business-intro-feature-list {
    display: flex;
    flex-direction: column;
    gap: 10px;

    margin: 19px 0 0;
    padding: 0;

    list-style: none;
}

.hs-business-intro-feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 9px;

    color: #d4d4d4;

    font-size: 10px;
    line-height: 1.45;
    font-weight: 600;
}

.hs-business-intro-feature-list i {
    flex: 0 0 auto;

    margin-top: 2px;

    color: #4ade80;

    font-size: 12px;
}

.hs-business-intro-action {
    min-height: 45px;

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

    margin-top: 23px;
    padding: 10px 15px;

    border-radius: 14px;

    font-size: 11px;
    font-weight: 600;
    text-decoration: none;

    transition:
        transform 0.18s ease,
        background-color 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}

.hs-business-intro-action:hover {
    transform: translateY(-1px);
}

.hs-business-intro-action i {
    font-size: 12px;

    transition:
        transform 0.18s ease;
}

.hs-business-intro-action:hover i {
    transform: translateX(3px);
}

.hs-business-intro-action-primary {
    border: 1px solid #f5f5f5;

    background: #f5f5f5;
    color: #050505;

    box-shadow:
        0 11px 22px rgba(255, 255, 255, 0.08);
}

.hs-business-intro-action-primary:hover {
    border-color: #ffffff;

    background: #ffffff;
}

.hs-business-intro-action-secondary {
    border: 1px solid rgba(251, 146, 60, 0.2);

    background: rgba(249, 115, 22, 0.11);
    color: #fb923c;
}

.hs-business-intro-action-secondary:hover {
    border-color: rgba(251, 146, 60, 0.34);

    background: rgba(249, 115, 22, 0.17);
}

.hs-business-intro-note {
    display: flex;
    align-items: flex-start;
    gap: 13px;

    margin-top: 20px;
    padding: 17px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 19px;

    background: #0d0d0d;
}

.hs-business-intro-note-icon {
    flex: 0 0 auto;

    width: 39px;
    height: 39px;

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

    border: 1px solid rgba(96, 165, 250, 0.16);
    border-radius: 13px;

    background: rgba(37, 99, 235, 0.12);
    color: #60a5fa;

    font-size: 15px;
}

.hs-business-intro-note-content {
    min-width: 0;
}

.hs-business-intro-note strong {
    display: block;

    color: #e5e5e5;

    font-size: 11px;
    line-height: 1.35;
    font-weight: 600;
}

.hs-business-intro-note p {
    margin: 4px 0 0;

    color: #8f8f8f;

    font-size: 9.8px;
    line-height: 1.55;
    font-weight: 500;
}

@media (max-width: 760px) {
    .hs-business-intro-hero {
        align-items: flex-start;

        padding: 24px;
    }

    .hs-business-intro-hero-icon {
        width: 76px;
        height: 76px;

        border-radius: 22px;

        font-size: 30px;
    }

    .hs-business-intro-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .hs-business-intro-page {
        padding-bottom: 90px;
    }

    .hs-business-intro-hero {
        padding: 20px;

        border-radius: 22px;
    }

    .hs-business-intro-hero-icon {
        display: none;
    }

    .hs-business-intro-hero h1 {
        font-size: 25px;
    }

    .hs-business-intro-hero p {
        font-size: 11.5px;
    }

    .hs-business-intro-card {
        padding: 20px;

        border-radius: 21px;
    }

    .hs-business-intro-card h2 {
        font-size: 17px;
    }

    .hs-business-intro-note {
        padding: 14px;

        border-radius: 17px;
    }
}

/* =========================================================
   İŞLETME REKLAM PLANLARI — KOYU TEMA
   ========================================================= */

.hs-ad-plans-page {
    width: 80%;
    max-width: 1240px;
    min-width: 0;

    margin: 0 auto;
    padding: 10px 0 120px;
}

/* =========================================================
   HERO
   ========================================================= */

.hs-ad-plans-hero {
    position: relative;

    width: 100%;

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

    overflow: hidden;

    padding: 36px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 28px;

    background:
        linear-gradient(
            135deg,
            #050505 0%,
            #17100a 100%
        );

    box-shadow:
        0 20px 46px rgba(0, 0, 0, 0.55);
}

.hs-ad-plans-hero::before {
    content: "";

    position: absolute;
    top: -130px;
    right: -90px;

    width: 330px;
    height: 330px;

    border-radius: 50%;

    background: rgba(249, 115, 22, 0.1);
}

.hs-ad-plans-hero-content {
    position: relative;
    z-index: 1;

    min-width: 0;
    max-width: 760px;
}

.hs-ad-plans-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 14px;
    padding: 8px 12px;

    border: 1px solid rgba(251, 146, 60, 0.22);
    border-radius: 999px;

    background: rgba(249, 115, 22, 0.12);
    color: #fb923c;

    font-size: 11px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.hs-ad-plans-hero h1 {
    max-width: 720px;

    margin: 0;

    color: #f5f5f5;

    font-size: clamp(30px, 4vw, 44px);
    line-height: 1.12;
    font-weight: 700;
    letter-spacing: -0.035em;
}

.hs-ad-plans-hero p {
    max-width: 700px;

    margin: 17px 0 0;

    color: #a3a3a3;

    font-size: 14px;
    line-height: 1.75;
    font-weight: 500;
}

.hs-ad-plans-hero-icon {
    position: relative;
    z-index: 1;

    flex: 0 0 auto;

    width: 112px;
    height: 112px;

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

    border: 1px solid rgba(251, 146, 60, 0.18);
    border-radius: 30px;

    background: rgba(255, 255, 255, 0.045);
    color: #fb923c;

    font-size: 43px;

    box-shadow:
        0 19px 38px rgba(0, 0, 0, 0.44);

    transform: rotate(3deg);
}

/* =========================================================
   BÖLÜM BAŞLIĞI
   ========================================================= */

.hs-ad-plans-section {
    margin-top: 30px;
}

.hs-ad-plans-section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;

    margin-bottom: 20px;
    padding: 0 4px;
}

.hs-ad-plans-section-header > div {
    min-width: 0;
}

.hs-ad-plans-section-header > div > span {
    display: block;

    margin-bottom: 8px;

    color: #fb923c;

    font-size: 10px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hs-ad-plans-section-header h2 {
    margin: 0;

    color: #f5f5f5;

    font-size: 25px;
    line-height: 1.3;
    font-weight: 600;
}

.hs-ad-plans-section-header > p {
    max-width: 440px;

    margin: 0;

    color: #8f8f8f;

    font-size: 12px;
    line-height: 1.6;
    font-weight: 500;

    text-align: right;
}

/* =========================================================
   PLAN KARTLARI
   ========================================================= */

.hs-ad-plans-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;

    align-items: stretch;
}

.hs-ad-plan-card {
    position: relative;

    min-width: 0;
    min-height: 100%;

    display: flex;
    flex-direction: column;

    padding: 26px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 25px;

    background: #050505;

    box-shadow:
        0 16px 38px rgba(0, 0, 0, 0.46);

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.hs-ad-plan-card:hover {
    transform: translateY(-4px);

    border-color: rgba(255, 255, 255, 0.15);

    box-shadow:
        0 24px 48px rgba(0, 0, 0, 0.62);
}

.hs-ad-plan-card-featured {
    border-color: rgba(251, 146, 60, 0.4);

    background:
        linear-gradient(
            180deg,
            #17100a 0%,
            #050505 62%
        );

    box-shadow:
        0 19px 42px rgba(249, 115, 22, 0.13);
}

.hs-ad-plan-card-featured:hover {
    border-color: rgba(251, 146, 60, 0.55);

    box-shadow:
        0 27px 52px rgba(249, 115, 22, 0.17);
}

/* =========================================================
   POPÜLER ETİKETİ
   ========================================================= */

.hs-ad-plan-popular-badge {
    position: absolute;
    top: -13px;
    right: 18px;

    display: inline-flex;
    align-items: center;
    gap: 6px;

    min-height: 29px;
    padding: 6px 11px;

    border: 2px solid #050505;
    border-radius: 999px;

    background: #f97316;
    color: #ffffff;

    font-size: 9px;
    line-height: 1;
    font-weight: 600;
    white-space: nowrap;

    box-shadow:
        0 9px 20px rgba(249, 115, 22, 0.29);
}

/* =========================================================
   KART ÜST ALANI
   ========================================================= */

.hs-ad-plan-card-top {
    display: flex;
    align-items: center;
    gap: 13px;

    min-width: 0;
}

.hs-ad-plan-icon {
    flex: 0 0 auto;

    width: 49px;
    height: 49px;

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

    border: 1px solid rgba(251, 146, 60, 0.18);
    border-radius: 16px;

    background: rgba(249, 115, 22, 0.12);
    color: #fb923c;

    font-size: 19px;
}

.hs-ad-plan-card-featured
.hs-ad-plan-icon {
    background: #f97316;
    color: #ffffff;
}

.hs-ad-plan-title-group {
    min-width: 0;
    flex: 1;
}

.hs-ad-plan-label {
    display: block;

    margin-bottom: 5px;

    color: #737373;

    font-size: 9px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.hs-ad-plan-title-group h3 {
    overflow: hidden;

    margin: 0;

    color: #f5f5f5;

    font-size: 20px;
    line-height: 1.25;
    font-weight: 600;

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

/* =========================================================
   FİYAT
   ========================================================= */

.hs-ad-plan-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px;

    margin-top: 24px;
}

.hs-ad-plan-price-value {
    color: #f5f5f5;

    font-size: 36px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: -0.035em;
}

.hs-ad-plan-price-currency {
    color: #f5f5f5;

    font-size: 21px;
    font-weight: 600;
}

.hs-ad-plan-price-period {
    margin-left: 3px;

    color: #737373;

    font-size: 10px;
    font-weight: 600;
}

.hs-ad-plan-description {
    min-height: 95px;

    margin: 17px 0 0;

    color: #a3a3a3;

    font-size: 12px;
    line-height: 1.65;
    font-weight: 500;
}

/* =========================================================
   ÖZELLİKLER
   ========================================================= */

.hs-ad-plan-features {
    display: flex;
    flex-direction: column;
    gap: 11px;

    margin: 20px 0 0;
    padding: 0;

    list-style: none;
}

.hs-ad-plan-features li {
    display: flex;
    align-items: flex-start;
    gap: 9px;

    color: #d4d4d4;

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

.hs-ad-plan-features i {
    flex: 0 0 auto;

    margin-top: 2px;

    color: #4ade80;

    font-size: 12px;
}

/* =========================================================
   KART ALT ALANI
   ========================================================= */

.hs-ad-plan-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    margin-top: auto;
    padding-top: 21px;

    border-top:
        1px solid rgba(255, 255, 255, 0.08);
}

.hs-ad-plan-footer span {
    color: #737373;

    font-size: 10px;
    font-weight: 600;
}

.hs-ad-plan-footer strong {
    color: #d4d4d4;

    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

/* =========================================================
   MOBİL UYGULAMA ALANI
   ========================================================= */

.hs-ad-plans-mobile {
    display: grid;
    grid-template-columns:
        auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 20px;

    margin-top: 30px;
    padding: 25px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 25px;

    background: #0d0d0d;

    box-shadow:
        0 16px 38px rgba(0, 0, 0, 0.42);
}

.hs-ad-plans-mobile-icon {
    width: 58px;
    height: 58px;

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

    border: 1px solid rgba(96, 165, 250, 0.18);
    border-radius: 18px;

    background: rgba(37, 99, 235, 0.13);
    color: #60a5fa;

    font-size: 24px;
}

.hs-ad-plans-mobile-content {
    min-width: 0;
}

.hs-ad-plans-mobile-label {
    display: block;

    margin-bottom: 6px;

    color: #60a5fa;

    font-size: 9px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.hs-ad-plans-mobile h2 {
    margin: 0;

    color: #f5f5f5;

    font-size: 18px;
    line-height: 1.35;
    font-weight: 600;
}

.hs-ad-plans-mobile p {
    max-width: 700px;

    margin: 7px 0 0;

    color: #8f8f8f;

    font-size: 11px;
    line-height: 1.6;
    font-weight: 500;
}

.hs-ad-plans-mobile-action {
    min-height: 47px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    padding: 10px 17px;

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

    background: #f5f5f5;
    color: #050505;

    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;

    transition:
        transform 0.18s ease,
        background-color 0.18s ease;
}

.hs-ad-plans-mobile-action:hover {
    transform: translateY(-1px);

    background: #ffffff;
}

/* =========================================================
   BİLGİ NOTU
   ========================================================= */

.hs-ad-plans-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    margin-top: 15px;
    padding: 14px 16px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 15px;

    background: #0d0d0d;
    color: #8f8f8f;
}

.hs-ad-plans-note i {
    flex: 0 0 auto;

    margin-top: 2px;

    color: #a3a3a3;

    font-size: 13px;
}

.hs-ad-plans-note p {
    margin: 0;

    font-size: 10px;
    line-height: 1.55;
    font-weight: 550;
}

/* =========================================================
   BOŞ DURUM
   ========================================================= */

.hs-ad-plans-empty {
    margin-top: 26px;
    padding: 42px 24px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 25px;

    background: #050505;

    text-align: center;
}

.hs-ad-plans-empty-icon {
    width: 62px;
    height: 62px;

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

    margin: 0 auto 15px;

    border-radius: 50%;

    background: rgba(249, 115, 22, 0.12);
    color: #fb923c;

    font-size: 25px;
}

.hs-ad-plans-empty strong {
    display: block;

    color: #f5f5f5;

    font-size: 17px;
    font-weight: 600;
}

.hs-ad-plans-empty p {
    max-width: 460px;

    margin: 9px auto 0;

    color: #8f8f8f;

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

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {
    .hs-ad-plans-page {
        width: 88%;
    }

    .hs-ad-plans-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .hs-ad-plans-page {
        width: calc(100% - 28px);
    }

    .hs-ad-plans-hero {
        align-items: flex-start;

        padding: 26px;
    }

    .hs-ad-plans-hero-icon {
        width: 78px;
        height: 78px;

        border-radius: 23px;

        font-size: 30px;
    }

    .hs-ad-plans-section-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .hs-ad-plans-section-header > p {
        max-width: none;

        text-align: left;
    }

    .hs-ad-plans-mobile {
        grid-template-columns:
            auto minmax(0, 1fr);
    }

    .hs-ad-plans-mobile-action {
        grid-column: 1 / -1;

        width: 100%;
    }
}

@media (max-width: 560px) {
    .hs-ad-plans-page {
        width: calc(100% - 20px);
        padding-bottom: 90px;
    }

    .hs-ad-plans-hero {
        padding: 21px;

        border-radius: 22px;
    }

    .hs-ad-plans-hero-icon {
        display: none;
    }

    .hs-ad-plans-hero h1 {
        font-size: 27px;
    }

    .hs-ad-plans-hero p {
        font-size: 12px;
    }

    .hs-ad-plans-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .hs-ad-plan-card {
        padding: 22px;

        border-radius: 22px;
    }

    .hs-ad-plan-description {
        min-height: 0;
    }

    .hs-ad-plans-mobile {
        grid-template-columns: 1fr;

        padding: 20px;
    }

    .hs-ad-plans-mobile-icon {
        width: 49px;
        height: 49px;
    }
}

/* =========================================================
   MOBİL UYGULAMA UYARISI — KOYU TEMA
   ========================================================= */

.hs-mobile-download-page {
    width: 100%;
    min-height: calc(100vh - 150px);

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

    padding: 24px 0 120px;
}

.hs-mobile-download-warning {
    position: relative;

    width: min(100%, 620px);

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

    overflow: hidden;

    padding: 42px 34px 34px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 30px;

    background:
        linear-gradient(
            145deg,
            #050505 0%,
            #17100a 100%
        );

    text-align: center;

    box-shadow:
        0 24px 54px rgba(0, 0, 0, 0.55);
}

.hs-mobile-download-warning-decoration {
    position: absolute;
    top: -130px;
    right: -110px;

    width: 310px;
    height: 310px;

    border-radius: 50%;

    background:
        rgba(249, 115, 22, 0.09);

    pointer-events: none;
}

.hs-mobile-download-warning-icon {
    position: relative;
    z-index: 1;

    width: 82px;
    height: 82px;

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

    margin-bottom: 18px;

    border: 1px solid rgba(251, 146, 60, 0.18);
    border-radius: 25px;

    background: rgba(249, 115, 22, 0.11);
    color: #fb923c;

    font-size: 32px;

    box-shadow:
        0 16px 34px rgba(0, 0, 0, 0.4);
}

.hs-mobile-download-warning-label {
    position: relative;
    z-index: 1;

    display: inline-flex;
    align-items: center;
    gap: 7px;

    margin-bottom: 12px;
    padding: 7px 11px;

    border: 1px solid rgba(251, 146, 60, 0.2);
    border-radius: 999px;

    background: rgba(249, 115, 22, 0.11);
    color: #fb923c;

    font-size: 9px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.hs-mobile-download-warning h1 {
    position: relative;
    z-index: 1;

    margin: 0;

    color: #f5f5f5;

    font-size: clamp(24px, 5vw, 34px);
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.hs-mobile-download-warning > p {
    position: relative;
    z-index: 1;

    max-width: 500px;

    margin: 14px 0 0;

    color: #a3a3a3;

    font-size: 12px;
    line-height: 1.7;
    font-weight: 500;
}

.hs-mobile-download-store-list {
    position: relative;
    z-index: 1;

    width: 100%;

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

    margin-top: 25px;
}

.hs-mobile-download-store-item {
    min-width: 0;

    display: flex;
    align-items: center;
    gap: 11px;

    padding: 13px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 17px;

    background: rgba(255, 255, 255, 0.035);

    text-align: left;
}

.hs-mobile-download-store-icon {
    flex: 0 0 auto;

    width: 41px;
    height: 41px;

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

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 13px;

    background: #111111;
    color: #d4d4d4;

    font-size: 18px;
}

.hs-mobile-download-store-content {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 3px;
}

.hs-mobile-download-store-content strong {
    color: #e5e5e5;

    font-size: 11px;
    line-height: 1.3;
    font-weight: 600;
}

.hs-mobile-download-store-content small {
    overflow: hidden;

    color: #737373;

    font-size: 8.5px;
    line-height: 1.35;
    font-weight: 600;

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

.hs-mobile-download-warning-action {
    position: relative;
    z-index: 1;

    min-width: 170px;
    min-height: 47px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    margin-top: 25px;
    padding: 10px 20px;

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

    background: #f5f5f5;
    color: #050505;

    font: inherit;
    font-size: 11px;
    font-weight: 600;

    cursor: pointer;

    box-shadow:
        0 12px 24px rgba(255, 255, 255, 0.08);

    transition:
        transform 0.18s ease,
        background-color 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}

.hs-mobile-download-warning-action:hover {
    border-color: #ffffff;

    background: #ffffff;

    transform: translateY(-2px);

    box-shadow:
        0 16px 30px rgba(255, 255, 255, 0.12);
}

.hs-mobile-download-warning-action:active {
    transform: scale(0.98);
}

.hs-mobile-download-warning-action:focus-visible {
    outline: 3px solid rgba(251, 146, 60, 0.25);
    outline-offset: 3px;
}

@media (max-width: 620px) {
    .hs-mobile-download-page {
        align-items: flex-start;

        min-height: auto;

        padding: 12px 0 90px;
    }

    .hs-mobile-download-warning {
        padding: 32px 20px 25px;

        border-radius: 24px;
    }

    .hs-mobile-download-warning-icon {
        width: 70px;
        height: 70px;

        border-radius: 21px;

        font-size: 27px;
    }

    .hs-mobile-download-warning h1 {
        font-size: 25px;
    }

    .hs-mobile-download-warning > p {
        font-size: 11px;
    }

    .hs-mobile-download-store-list {
        grid-template-columns: 1fr;
    }

    .hs-mobile-download-warning-action {
        width: 100%;
    }
}

/* =========================================================
   MOBİL UYGULAMA QR
   ========================================================= */

.hs-mobile-download-qr {
    display: flex;
    align-items: center;
    gap: 18px;

    margin: 24px 0 12px;
    padding: 18px;

    border: 1px solid rgba(255,255,255,.08);
    border-radius: 22px;

    background: #101010;

    box-shadow:
        0 8px 24px rgba(0,0,0,.35);
}

.hs-mobile-download-qr-image {
    flex: 0 0 118px;

    width: 118px;
    height: 118px;

    padding: 8px;

    border: 1px solid rgba(255,255,255,.08);
    border-radius: 18px;

    background: #ffffff;
}

.hs-mobile-download-qr-image img {
    width: 100%;
    height: 100%;

    display: block;

    border-radius: 10px;
}

.hs-mobile-download-qr-content {
    min-width: 0;
    flex: 1;

    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hs-mobile-download-qr-content strong {
    color: #ffffff;

    font-size: 17px;
    font-weight: 600;
}

.hs-mobile-download-qr-content span {
    color: rgba(255,255,255,.68);

    font-size: 13px;
    line-height: 1.6;
}

@media (max-width:640px){

    .hs-mobile-download-qr{
        flex-direction:column;
        text-align:center;

        padding:20px;
    }

    .hs-mobile-download-qr-image{
        width:150px;
        height:150px;

        flex:none;
    }

}

/* =========================================================
   İŞLETME BAŞVURUSU — KOYU TEMA
   ========================================================= */

.hs-business-application-page {
    width: 80%;
    max-width: 1050px;
    min-width: 0;

    margin: 0 auto;
    padding: 8px 0 120px;
}

.hs-business-application-hero {
    position: relative;

    width: 100%;

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

    overflow: hidden;

    padding: 32px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 28px;

    background:
        linear-gradient(
            135deg,
            #050505 0%,
            #07101d 100%
        );

    box-shadow:
        0 20px 46px rgba(0, 0, 0, 0.55);
}

.hs-business-application-hero::after {
    content: "";

    position: absolute;
    top: -125px;
    right: -90px;

    width: 310px;
    height: 310px;

    border-radius: 50%;

    background: rgba(37, 99, 235, 0.11);
}

.hs-business-application-hero-content {
    position: relative;
    z-index: 1;

    min-width: 0;
    max-width: 720px;
}

.hs-business-application-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 13px;
    padding: 7px 11px;

    border: 1px solid rgba(96, 165, 250, 0.2);
    border-radius: 999px;

    background: rgba(37, 99, 235, 0.13);
    color: #60a5fa;

    font-size: 10px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.hs-business-application-hero h1 {
    max-width: 680px;

    margin: 0;

    color: #f5f5f5;

    font-size: clamp(27px, 4vw, 39px);
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -0.035em;
}

.hs-business-application-hero p {
    max-width: 660px;

    margin: 15px 0 0;

    color: #a3a3a3;

    font-size: 13px;
    line-height: 1.7;
    font-weight: 500;
}

.hs-business-application-hero-icon {
    position: relative;
    z-index: 1;

    flex: 0 0 auto;

    width: 96px;
    height: 96px;

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

    border: 1px solid rgba(96, 165, 250, 0.18);
    border-radius: 28px;

    background: rgba(255, 255, 255, 0.04);
    color: #60a5fa;

    font-size: 37px;

    box-shadow:
        0 18px 36px rgba(0, 0, 0, 0.44);

    transform: rotate(3deg);
}

.hs-business-application-form {
    width: 100%;
    margin-top: 21px;
}

.hs-business-application-section {
    width: 100%;
    padding: 25px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 25px;

    background: #050505;

    box-shadow:
        0 16px 38px rgba(0, 0, 0, 0.45);
}

.hs-business-application-section +
.hs-business-application-section {
    margin-top: 18px;
}

.hs-business-application-section-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.hs-business-application-step {
    flex: 0 0 auto;

    width: 35px;
    height: 35px;

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

    border: 1px solid rgba(96, 165, 250, 0.17);
    border-radius: 12px;

    background: rgba(37, 99, 235, 0.13);
    color: #60a5fa;

    font-size: 12px;
    line-height: 1;
    font-weight: 700;
}

.hs-business-application-section-title {
    min-width: 0;
    flex: 1;
}

.hs-business-application-section-title > span {
    display: block;

    margin-bottom: 5px;

    color: #60a5fa;

    font-size: 9px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.hs-business-application-section-title h2 {
    margin: 0;

    color: #f5f5f5;

    font-size: 18px;
    line-height: 1.35;
    font-weight: 600;
}

.hs-business-application-section-title p {
    margin: 7px 0 0;

    color: #8f8f8f;

    font-size: 11px;
    line-height: 1.55;
    font-weight: 500;
}

.hs-business-search-box {
    position: relative;

    width: 100%;

    display: flex;
    align-items: center;

    margin-top: 20px;
}

.hs-business-search-icon {
    position: absolute;
    z-index: 1;
    left: 16px;

    color: #737373;

    font-size: 14px;

    pointer-events: none;
}

.hs-business-search-input {
    width: 100%;
    height: 51px;

    padding: 0 48px 0 45px;

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;

    outline: none;

    background: #0d0d0d;
    color: #f5f5f5;

    font: inherit;
    font-size: 12px;
    font-weight: 600;

    transition:
        border-color 0.18s ease,
        background-color 0.18s ease,
        box-shadow 0.18s ease;
}

.hs-business-search-input::placeholder {
    color: #737373;
}

.hs-business-search-input:focus {
    border-color: rgba(96, 165, 250, 0.48);

    background: #111111;

    box-shadow:
        0 0 0 4px rgba(37, 99, 235, 0.12);
}

.hs-business-search-clear {
    position: absolute;
    right: 9px;

    width: 34px;
    height: 34px;

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

    border: 0;
    border-radius: 10px;

    background: transparent;
    color: #737373;

    font: inherit;
    cursor: pointer;
}

.hs-business-search-clear:hover {
    background: #1a1a1a;
    color: #d4d4d4;
}

.hs-business-search-results {
    width: 100%;
    max-height: 430px;

    display: flex;
    flex-direction: column;
    gap: 9px;

    overflow-x: hidden;
    overflow-y: auto;

    margin-top: 14px;
    padding: 3px 5px 3px 0;

    scrollbar-width: thin;
    scrollbar-color:
        #3f3f46
        transparent;
}

.hs-business-search-results:empty {
    display: none;
}

.hs-business-result-item {
    width: 100%;
    min-width: 0;

    display: grid;
    grid-template-columns:
        auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;

    padding: 12px;

    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 17px;

    background: #0d0d0d;
    color: inherit;

    font: inherit;
    text-align: left;

    cursor: pointer;

    transition:
        border-color 0.18s ease,
        background-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease;
}

.hs-business-result-item:hover {
    border-color: rgba(96, 165, 250, 0.21);

    background: #101722;

    box-shadow:
        0 9px 21px rgba(0, 0, 0, 0.34);

    transform: translateY(-1px);
}

.hs-business-result-item.is-selected {
    border-color: rgba(96, 165, 250, 0.48);

    background: rgba(37, 99, 235, 0.13);

    box-shadow:
        0 0 0 3px rgba(37, 99, 235, 0.1);
}

.hs-business-result-image {
    width: 54px;
    height: 54px;

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

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 15px;

    background: #171717;
    color: #a3a3a3;

    font-size: 18px;
}

.hs-business-result-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}

.hs-business-result-content {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 5px;
}

.hs-business-result-content strong {
    overflow: hidden;

    color: #e5e5e5;

    font-size: 12px;
    line-height: 1.35;
    font-weight: 600;

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

.hs-business-result-content small {
    overflow: hidden;

    color: #8f8f8f;

    font-size: 9.5px;
    line-height: 1.4;
    font-weight: 550;

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

.hs-business-result-select {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 7px 9px;

    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;

    background: #171717;
    color: #a3a3a3;

    font-size: 9px;
    line-height: 1;
    font-weight: 600;
}

.hs-business-result-item.is-selected
.hs-business-result-select {
    border-color: #60a5fa;

    background: #2563eb;
    color: #ffffff;
}

.hs-business-search-loading,
.hs-business-search-more {
    min-height: 90px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    margin-top: 14px;

    color: #8f8f8f;

    font-size: 10px;
    font-weight: 600;
}

.hs-business-search-more {
    min-height: 50px;
    margin-top: 5px;
}

.hs-business-search-loading[hidden],
.hs-business-search-more[hidden] {
    display: none !important;
}

.hs-business-search-spinner,
.hs-business-application-submit-spinner {
    width: 21px;
    height: 21px;

    flex: 0 0 auto;

    border: 3px solid rgba(255, 255, 255, 0.12);
    border-top-color: #d4d4d4;
    border-radius: 50%;

    animation:
        hs-business-application-spin
        0.7s linear infinite;
}

@keyframes hs-business-application-spin {
    to {
        transform: rotate(360deg);
    }
}

.hs-business-search-error {
    display: grid;
    grid-template-columns:
        auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;

    margin-top: 14px;
    padding: 14px;

    border: 1px solid rgba(248, 113, 113, 0.25);
    border-radius: 16px;

    background: rgba(127, 29, 29, 0.18);
}

.hs-business-search-error[hidden] {
    display: none !important;
}

.hs-business-search-error-icon {
    color: #f87171;

    font-size: 18px;
}

.hs-business-search-error > div {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 3px;
}

.hs-business-search-error strong {
    color: #fca5a5;

    font-size: 10.5px;
    font-weight: 600;
}

.hs-business-search-error span {
    color: #f87171;

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

.hs-business-search-error button {
    padding: 8px 11px;

    border: 1px solid rgba(248, 113, 113, 0.28);
    border-radius: 10px;

    background: #171717;
    color: #fca5a5;

    font: inherit;
    font-size: 9px;
    font-weight: 600;

    cursor: pointer;
}

.hs-business-search-empty {
    width: 100%;

    display: flex;
    align-items: center;
    gap: 14px;

    margin-top: 15px;
    padding: 18px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 19px;

    background: #0d0d0d;
}

.hs-business-search-empty[hidden] {
    display: none !important;
}

.hs-business-search-empty-icon {
    flex: 0 0 auto;

    width: 48px;
    height: 48px;

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

    border: 1px solid rgba(251, 146, 60, 0.17);
    border-radius: 15px;

    background: rgba(249, 115, 22, 0.12);
    color: #fb923c;

    font-size: 19px;
}

.hs-business-search-empty-content {
    min-width: 0;
    flex: 1;
}

.hs-business-search-empty-content strong {
    display: block;

    color: #e5e5e5;

    font-size: 12px;
    line-height: 1.35;
    font-weight: 600;
}

.hs-business-search-empty-content p {
    margin: 5px 0 0;

    color: #8f8f8f;

    font-size: 9.5px;
    line-height: 1.55;
    font-weight: 500;
}

.hs-business-search-empty-action {
    flex: 0 0 auto;

    min-height: 41px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    padding: 9px 13px;

    border: 1px solid #f5f5f5;
    border-radius: 13px;

    background: #f5f5f5;
    color: #050505;

    font-size: 9.5px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.hs-business-selected {
    width: 100%;

    margin-top: 18px;
    padding: 19px;

    border: 1px solid rgba(96, 165, 250, 0.2);
    border-radius: 21px;

    background: rgba(37, 99, 235, 0.09);

    box-shadow:
        0 11px 26px rgba(0, 0, 0, 0.33);
}

.hs-business-selected[hidden] {
    display: none !important;
}

.hs-business-selected-label {
    display: block;

    margin-bottom: 10px;

    color: #60a5fa;

    font-size: 9px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.hs-business-selected-card {
    display: grid;
    grid-template-columns:
        auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
}

.hs-business-selected-image {
    width: 58px;
    height: 58px;

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

    overflow: hidden;

    border: 1px solid rgba(96, 165, 250, 0.15);
    border-radius: 16px;

    background: rgba(37, 99, 235, 0.13);
    color: #60a5fa;

    font-size: 20px;
}

.hs-business-selected-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}

.hs-business-selected-image img[hidden],
.hs-business-selected-image span[hidden] {
    display: none !important;
}

.hs-business-selected-content {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 5px;
}

.hs-business-selected-content strong {
    overflow: hidden;

    color: #e5e5e5;

    font-size: 13px;
    line-height: 1.35;
    font-weight: 600;

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

.hs-business-selected-content span {
    overflow: hidden;

    color: #8f8f8f;

    font-size: 9.8px;
    line-height: 1.4;
    font-weight: 550;

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

.hs-business-selected-change {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 8px 10px;

    border: 1px solid rgba(96, 165, 250, 0.18);
    border-radius: 11px;

    background: #111827;
    color: #60a5fa;

    font: inherit;
    font-size: 9px;
    font-weight: 600;

    cursor: pointer;
}

.hs-business-document-section {
    margin-top: 18px;

    opacity: 0.5;

    transition:
        opacity 0.2s ease,
        border-color 0.2s ease;
}

.hs-business-document-section.is-enabled {
    opacity: 1;
}

.hs-business-document-upload {
    width: 100%;
    min-height: 125px;

    display: grid;
    grid-template-columns:
        auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 15px;

    margin-top: 20px;
    padding: 18px;

    border: 1.5px dashed rgba(255, 255, 255, 0.16);
    border-radius: 19px;

    background: #0d0d0d;

    cursor: pointer;

    transition:
        border-color 0.18s ease,
        background-color 0.18s ease,
        box-shadow 0.18s ease;
}

.hs-business-document-section.is-enabled
.hs-business-document-upload:hover {
    border-color: rgba(96, 165, 250, 0.45);

    background: #0d1520;

    box-shadow:
        0 0 0 4px rgba(37, 99, 235, 0.09);
}

.hs-business-document-upload[hidden] {
    display: none !important;
}

.hs-business-document-upload input {
    position: absolute;

    width: 1px;
    height: 1px;

    overflow: hidden;

    opacity: 0;

    pointer-events: none;
}

.hs-business-document-upload-icon {
    width: 48px;
    height: 48px;

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

    border: 1px solid rgba(96, 165, 250, 0.17);
    border-radius: 15px;

    background: rgba(37, 99, 235, 0.13);
    color: #60a5fa;

    font-size: 19px;
}

.hs-business-document-upload-content {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 5px;
}

.hs-business-document-upload-content strong {
    color: #e5e5e5;

    font-size: 12px;
    line-height: 1.35;
    font-weight: 600;
}

.hs-business-document-upload-content small {
    color: #8f8f8f;

    font-size: 9px;
    line-height: 1.45;
    font-weight: 550;
}

.hs-business-document-upload-action {
    padding: 8px 11px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 11px;

    background: #171717;
    color: #d4d4d4;

    font-size: 9px;
    font-weight: 600;
    white-space: nowrap;
}

.hs-business-document-selected {
    width: 100%;

    display: grid;
    grid-template-columns:
        auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;

    margin-top: 20px;
    padding: 14px;

    border: 1px solid rgba(74, 222, 128, 0.18);
    border-radius: 17px;

    background: rgba(22, 101, 52, 0.18);
}

.hs-business-document-selected[hidden] {
    display: none !important;
}

.hs-business-document-selected-icon {
    width: 42px;
    height: 42px;

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

    border-radius: 13px;

    background: rgba(74, 222, 128, 0.11);
    color: #4ade80;

    font-size: 17px;
}

.hs-business-document-selected-content {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hs-business-document-selected-content strong {
    overflow: hidden;

    color: #bbf7d0;

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

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

.hs-business-document-selected-content small {
    color: #86efac;

    font-size: 8.5px;
    font-weight: 600;
}

.hs-business-document-selected button {
    width: 34px;
    height: 34px;

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

    border: 0;
    border-radius: 10px;

    background: rgba(74, 222, 128, 0.1);
    color: #86efac;

    font: inherit;
    cursor: pointer;
}

.hs-business-document-note {
    display: flex;
    align-items: flex-start;
    gap: 9px;

    margin-top: 13px;
    padding: 11px 12px;

    border-radius: 13px;

    background: #0d0d0d;
    color: #8f8f8f;
}

.hs-business-document-note i {
    flex: 0 0 auto;

    margin-top: 2px;

    color: #60a5fa;

    font-size: 11px;
}

.hs-business-document-note p {
    margin: 0;

    font-size: 8.8px;
    line-height: 1.5;
    font-weight: 550;
}

.hs-business-application-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    margin-top: 19px;
    padding: 16px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;

    background: rgba(13, 13, 13, 0.96);

    box-shadow:
        0 17px 40px rgba(0, 0, 0, 0.5);

    backdrop-filter: blur(12px);
}

.hs-business-application-footer-info {
    min-width: 0;

    display: flex;
    align-items: flex-start;
    gap: 9px;

    color: #8f8f8f;
}

.hs-business-application-footer-info i {
    flex: 0 0 auto;

    margin-top: 2px;

    color: #60a5fa;

    font-size: 12px;
}

.hs-business-application-footer-info span {
    max-width: 530px;

    font-size: 9.5px;
    line-height: 1.5;
    font-weight: 550;
}

.hs-business-application-submit {
    flex: 0 0 auto;

    min-width: 190px;
    min-height: 48px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    padding: 10px 18px;

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

    background: #f5f5f5;
    color: #050505;

    font: inherit;
    font-size: 11px;
    font-weight: 600;

    cursor: pointer;

    transition:
        background-color 0.18s ease,
        transform 0.18s ease,
        opacity 0.18s ease;
}

.hs-business-application-submit:hover:not(:disabled) {
    background: #ffffff;

    transform: translateY(-1px);
}

.hs-business-application-submit:disabled {
    border-color: #262626;

    background: #262626;
    color: #737373;

    cursor: not-allowed;
}

.hs-business-application-submit-spinner {
    width: 18px;
    height: 18px;

    border-color: rgba(5, 5, 5, 0.2);
    border-top-color: #050505;
}

.hs-business-application-submit-spinner[hidden] {
    display: none !important;
}

@media (max-width: 1050px) {
    .hs-business-application-page {
        width: 88%;
    }
}

@media (max-width: 760px) {
    .hs-business-application-page {
        width: calc(100% - 28px);
    }

    .hs-business-application-hero {
        padding: 25px;
    }

    .hs-business-application-hero-icon {
        width: 76px;
        height: 76px;

        border-radius: 22px;

        font-size: 29px;
    }

    .hs-business-search-empty {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .hs-business-search-empty-action {
        width: 100%;
    }

    .hs-business-application-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .hs-business-application-submit {
        width: 100%;
    }
}

@media (max-width: 560px) {
    .hs-business-application-page {
        width: calc(100% - 20px);
        padding-bottom: 90px;
    }

    .hs-business-application-hero {
        padding: 21px;

        border-radius: 22px;
    }

    .hs-business-application-hero-icon {
        display: none;
    }

    .hs-business-application-hero h1 {
        font-size: 27px;
    }

    .hs-business-application-section {
        padding: 19px;

        border-radius: 21px;
    }

    .hs-business-result-item {
        grid-template-columns:
            auto minmax(0, 1fr);
    }

    .hs-business-result-select {
        grid-column: 2;

        width: max-content;
    }

    .hs-business-selected-card {
        grid-template-columns:
            auto minmax(0, 1fr);
    }

    .hs-business-selected-change {
        grid-column: 1 / -1;

        justify-content: center;

        width: 100%;
    }

    .hs-business-document-upload {
        grid-template-columns:
            auto minmax(0, 1fr);
    }

    .hs-business-document-upload-action {
        grid-column: 1 / -1;

        text-align: center;
    }

    .hs-business-search-error {
        grid-template-columns:
            auto minmax(0, 1fr);
    }

    .hs-business-search-error button {
        grid-column: 1 / -1;

        width: 100%;
    }
}

/* =========================================================
   İŞLETME SEÇİMİ — KOYU TEMA
   ========================================================= */

.hs-business-selection-page {
    width: 80%;
    max-width: 1080px;
    min-width: 0;

    margin: 0 auto;
    padding: 8px 0 120px;
}

/* =========================================================
   HERO
   ========================================================= */

.hs-business-selection-hero {
    position: relative;

    width: 100%;

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

    overflow: hidden;

    padding: 32px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 28px;

    background:
        linear-gradient(
            135deg,
            #050505 0%,
            #07101d 100%
        );

    box-shadow:
        0 20px 46px rgba(0, 0, 0, 0.55);
}

.hs-business-selection-hero::before {
    content: "";

    position: absolute;
    top: -125px;
    right: -80px;

    width: 310px;
    height: 310px;

    border-radius: 50%;

    background: rgba(37, 99, 235, 0.11);
}

.hs-business-selection-hero-content {
    position: relative;
    z-index: 1;

    min-width: 0;
    max-width: 720px;
}

.hs-business-selection-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 13px;
    padding: 7px 11px;

    border: 1px solid rgba(96, 165, 250, 0.2);
    border-radius: 999px;

    background: rgba(37, 99, 235, 0.13);
    color: #60a5fa;

    font-size: 10px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.hs-business-selection-hero h1 {
    max-width: 680px;

    margin: 0;

    color: #f5f5f5;

    font-size: clamp(27px, 4vw, 39px);
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -0.035em;
}

.hs-business-selection-hero p {
    max-width: 650px;

    margin: 15px 0 0;

    color: #a3a3a3;

    font-size: 13px;
    line-height: 1.7;
    font-weight: 500;
}

.hs-business-selection-hero-icon {
    position: relative;
    z-index: 1;

    flex: 0 0 auto;

    width: 96px;
    height: 96px;

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

    border: 1px solid rgba(96, 165, 250, 0.18);
    border-radius: 28px;

    background: rgba(255, 255, 255, 0.04);
    color: #60a5fa;

    font-size: 37px;

    box-shadow:
        0 18px 36px rgba(0, 0, 0, 0.44);

    transform: rotate(3deg);
}

/* =========================================================
   ÖZET
   ========================================================= */

.hs-business-selection-summary {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 14px;

    margin-top: 18px;
}

.hs-business-selection-summary-item {
    min-width: 0;

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

    padding: 17px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;

    background: #050505;

    box-shadow:
        0 14px 32px rgba(0, 0, 0, 0.4);
}

.hs-business-selection-summary-icon {
    flex: 0 0 auto;

    width: 42px;
    height: 42px;

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

    border-radius: 14px;

    background: #171717;
    color: #a3a3a3;

    font-size: 16px;
}

.hs-business-selection-summary-item.is-active
.hs-business-selection-summary-icon {
    background: rgba(22, 163, 74, 0.14);
    color: #4ade80;
}

.hs-business-selection-summary-item.is-pending
.hs-business-selection-summary-icon {
    background: rgba(249, 115, 22, 0.13);
    color: #fb923c;
}

.hs-business-selection-summary-content {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hs-business-selection-summary-content small {
    color: #8f8f8f;

    font-size: 9px;
    line-height: 1;
    font-weight: 600;
}

.hs-business-selection-summary-content strong {
    color: #f5f5f5;

    font-size: 19px;
    line-height: 1;
    font-weight: 700;
}

/* =========================================================
   LİSTE BÖLÜMÜ
   ========================================================= */

.hs-business-selection-section {
    width: 100%;

    margin-top: 18px;
    padding: 25px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 25px;

    background: #050505;

    box-shadow:
        0 16px 38px rgba(0, 0, 0, 0.45);
}

.hs-business-selection-section-header {
    margin-bottom: 18px;
}

.hs-business-selection-section-header > div > span {
    display: block;

    margin-bottom: 6px;

    color: #60a5fa;

    font-size: 9px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.hs-business-selection-section-header h2 {
    margin: 0;

    color: #f5f5f5;

    font-size: 20px;
    line-height: 1.35;
    font-weight: 600;
}

.hs-business-selection-section-header p {
    margin: 7px 0 0;

    color: #8f8f8f;

    font-size: 11px;
    line-height: 1.55;
    font-weight: 500;
}

/* =========================================================
   KARTLAR
   ========================================================= */

.hs-business-selection-list {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.hs-business-selection-card {
    width: 100%;
    min-width: 0;

    display: grid;
    grid-template-columns:
        auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;

    padding: 13px;

    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 19px;

    background: #0d0d0d;
    color: inherit;

    font: inherit;
    text-align: left;

    cursor: pointer;

    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        background-color 0.18s ease,
        box-shadow 0.18s ease;
}

.hs-business-selection-card:hover {
    transform: translateY(-2px);

    border-color: rgba(96, 165, 250, 0.21);

    background: #101722;

    box-shadow:
        0 13px 29px rgba(0, 0, 0, 0.4);
}

.hs-business-selection-card.is-active:hover {
    border-color: rgba(74, 222, 128, 0.26);

    background: rgba(22, 101, 52, 0.13);
}

.hs-business-selection-card.is-pending:hover {
    border-color: rgba(251, 146, 60, 0.28);

    background: rgba(124, 45, 18, 0.14);
}

.hs-business-selection-card-image {
    width: 62px;
    height: 62px;

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

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 17px;

    background: #171717;
    color: #a3a3a3;

    font-size: 21px;
}

.hs-business-selection-card-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}

.hs-business-selection-card-image-fallback {
    width: 100%;
    height: 100%;

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

.hs-business-selection-card-image-fallback[hidden] {
    display: none !important;
}

.hs-business-selection-card-content {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 6px;
}

.hs-business-selection-card-content strong {
    display: block;
    overflow: hidden;

    color: #e5e5e5;

    font-size: 13px;
    line-height: 1.35;
    font-weight: 600;

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

.hs-business-selection-card-content small {
    display: block;
    overflow: hidden;

    color: #8f8f8f;

    font-size: 10px;
    line-height: 1.4;
    font-weight: 550;

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

.hs-business-selection-card-side {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    gap: 11px;
}

.hs-business-selection-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    min-height: 31px;
    padding: 7px 10px;

    border-radius: 999px;

    font-size: 9px;
    line-height: 1;
    font-weight: 600;
    white-space: nowrap;
}

.hs-business-selection-status.is-active {
    border: 1px solid rgba(74, 222, 128, 0.18);

    background: rgba(22, 101, 52, 0.18);
    color: #86efac;
}

.hs-business-selection-status.is-pending {
    border: 1px solid rgba(251, 146, 60, 0.2);

    background: rgba(124, 45, 18, 0.2);
    color: #fdba74;
}

.hs-business-selection-arrow {
    width: 34px;
    height: 34px;

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

    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 11px;

    background: #171717;
    color: #a3a3a3;

    font-size: 11px;
}

/* =========================================================
   BOŞ DURUM
   ========================================================= */

.hs-business-selection-empty {
    padding: 36px 20px;

    text-align: center;
}

.hs-business-selection-empty-icon {
    width: 58px;
    height: 58px;

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

    margin: 0 auto 14px;

    border-radius: 50%;

    background: #171717;
    color: #a3a3a3;

    font-size: 22px;
}

.hs-business-selection-empty strong {
    display: block;

    color: #e5e5e5;

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

.hs-business-selection-empty p {
    max-width: 460px;

    margin: 8px auto 16px;

    color: #8f8f8f;

    font-size: 10px;
    line-height: 1.55;
}

.hs-business-selection-empty-action {
    min-height: 42px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 9px 14px;

    border-radius: 13px;

    background: #f5f5f5;
    color: #050505;

    font-size: 10px;
    font-weight: 600;
    text-decoration: none;
}

/* =========================================================
   MODAL
   ========================================================= */

body.hs-business-pending-modal-open {
    overflow: hidden;
}

.hs-business-pending-modal {
    position: fixed;
    z-index: 9999;
    inset: 0;

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

    padding: 20px;

    visibility: hidden;
    opacity: 0;

    background: rgba(0, 0, 0, 0.78);

    backdrop-filter: blur(8px);

    transition:
        opacity 0.2s ease,
        visibility 0.2s ease;
}

.hs-business-pending-modal.is-open {
    visibility: visible;
    opacity: 1;
}

.hs-business-pending-modal-dialog {
    position: relative;

    width: min(100%, 470px);

    padding: 29px;

    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 25px;

    background: #0d0d0d;

    box-shadow:
        0 28px 70px rgba(0, 0, 0, 0.72);

    text-align: center;

    transform: translateY(12px) scale(0.98);

    transition:
        transform 0.2s ease;
}

.hs-business-pending-modal.is-open
.hs-business-pending-modal-dialog {
    transform: translateY(0) scale(1);
}

.hs-business-pending-modal-close {
    position: absolute;
    top: 13px;
    right: 13px;

    width: 35px;
    height: 35px;

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

    border: 0;
    border-radius: 11px;

    background: #1a1a1a;
    color: #a3a3a3;

    font: inherit;
    cursor: pointer;
}

.hs-business-pending-modal-icon {
    width: 62px;
    height: 62px;

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

    margin: 0 auto 14px;

    border: 1px solid rgba(251, 146, 60, 0.19);
    border-radius: 20px;

    background: rgba(124, 45, 18, 0.22);
    color: #fb923c;

    font-size: 25px;
}

.hs-business-pending-modal-label {
    display: inline-flex;

    margin-bottom: 9px;

    color: #fb923c;

    font-size: 9px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.hs-business-pending-modal h2 {
    margin: 0;

    color: #f5f5f5;

    font-size: 21px;
    line-height: 1.3;
    font-weight: 700;
}

.hs-business-pending-modal-dialog > p {
    margin: 12px 0 0;

    color: #a3a3a3;

    font-size: 11px;
    line-height: 1.65;
    font-weight: 500;
}

.hs-business-pending-modal-dialog > p strong {
    color: #e5e5e5;
    font-weight: 600;
}

.hs-business-pending-modal-note {
    display: flex;
    align-items: flex-start;
    gap: 9px;

    margin-top: 17px;
    padding: 12px;

    border: 1px solid rgba(251, 146, 60, 0.14);
    border-radius: 14px;

    background: rgba(124, 45, 18, 0.16);
    color: #fdba74;

    text-align: left;
}

.hs-business-pending-modal-note i {
    flex: 0 0 auto;

    margin-top: 2px;

    color: #fb923c;

    font-size: 11px;
}

.hs-business-pending-modal-note span {
    font-size: 9px;
    line-height: 1.5;
    font-weight: 600;
}

.hs-business-pending-modal-action {
    width: 100%;
    min-height: 47px;

    margin-top: 18px;

    border: 0;
    border-radius: 14px;

    background: #f5f5f5;
    color: #050505;

    font: inherit;
    font-size: 11px;
    font-weight: 600;

    cursor: pointer;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1050px) {
    .hs-business-selection-page {
        width: 88%;
    }
}

@media (max-width: 760px) {
    .hs-business-selection-page {
        width: calc(100% - 28px);
    }

    .hs-business-selection-hero {
        padding: 25px;
    }

    .hs-business-selection-hero-icon {
        width: 76px;
        height: 76px;

        border-radius: 22px;

        font-size: 29px;
    }
}

@media (max-width: 600px) {
    .hs-business-selection-page {
        width: calc(100% - 20px);
        padding-bottom: 90px;
    }

    .hs-business-selection-hero {
        padding: 21px;

        border-radius: 22px;
    }

    .hs-business-selection-hero-icon {
        display: none;
    }

    .hs-business-selection-hero h1 {
        font-size: 27px;
    }

    .hs-business-selection-summary {
        grid-template-columns: 1fr;
    }

    .hs-business-selection-section {
        padding: 18px;

        border-radius: 21px;
    }

    .hs-business-selection-card {
        grid-template-columns:
            auto minmax(0, 1fr);
    }

    .hs-business-selection-card-side {
        grid-column: 1 / -1;

        justify-content: space-between;

        padding-left: 76px;
    }
}

@media (max-width: 420px) {
    .hs-business-selection-card-image {
        width: 54px;
        height: 54px;
    }

    .hs-business-selection-card-side {
        padding-left: 68px;
    }

    .hs-business-pending-modal-dialog {
        padding: 25px 19px 20px;
    }
}

/* =========================================================
   İŞLETME SEÇİMİ — YENİ İŞLETME BAŞVURUSU — KOYU
   ========================================================= */

.hs-business-selection-new-application {
    position: relative;

    width: 100%;

    display: grid;
    grid-template-columns:
        auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 17px;

    overflow: hidden;

    margin-top: 18px;
    padding: 21px;

    border: 1px solid rgba(96, 165, 250, 0.14);
    border-radius: 23px;

    background:
        linear-gradient(
            135deg,
            #0d0d0d 0%,
            #07101d 100%
        );

    box-shadow:
        0 16px 38px rgba(0, 0, 0, 0.43);
}

.hs-business-selection-new-application::before {
    content: "";

    position: absolute;
    top: -90px;
    right: -65px;

    width: 210px;
    height: 210px;

    border-radius: 50%;

    background: rgba(37, 99, 235, 0.09);

    pointer-events: none;
}

.hs-business-selection-new-application-icon {
    position: relative;
    z-index: 1;

    flex: 0 0 auto;

    width: 54px;
    height: 54px;

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

    border: 1px solid rgba(96, 165, 250, 0.18);
    border-radius: 17px;

    background: rgba(37, 99, 235, 0.14);
    color: #60a5fa;

    font-size: 21px;
}

.hs-business-selection-new-application-content {
    position: relative;
    z-index: 1;

    min-width: 0;
}

.hs-business-selection-new-application-content > span {
    display: block;

    margin-bottom: 5px;

    color: #60a5fa;

    font-size: 9px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.hs-business-selection-new-application-content h2 {
    margin: 0;

    color: #f5f5f5;

    font-size: 17px;
    line-height: 1.35;
    font-weight: 600;
}

.hs-business-selection-new-application-content p {
    max-width: 650px;

    margin: 6px 0 0;

    color: #8f8f8f;

    font-size: 10px;
    line-height: 1.55;
    font-weight: 500;
}

.hs-business-selection-new-application-action {
    position: relative;
    z-index: 1;

    flex: 0 0 auto;

    min-height: 44px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 10px 15px;

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

    background: #f5f5f5;
    color: #050505;

    font-size: 10px;
    line-height: 1;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;

    transition:
        background-color 0.18s ease,
        transform 0.18s ease,
        box-shadow 0.18s ease;
}

.hs-business-selection-new-application-action:hover {
    background: #ffffff;

    box-shadow:
        0 10px 22px rgba(0, 0, 0, 0.36);

    transform: translateY(-1px);
}

@media (max-width: 700px) {
    .hs-business-selection-new-application {
        grid-template-columns:
            auto minmax(0, 1fr);
    }

    .hs-business-selection-new-application-action {
        grid-column: 1 / -1;

        width: 100%;
    }
}

@media (max-width: 480px) {
    .hs-business-selection-new-application {
        grid-template-columns: 1fr;

        padding: 18px;

        text-align: center;
    }

    .hs-business-selection-new-application-icon {
        margin: 0 auto;
    }

    .hs-business-selection-new-application-content p {
        margin-right: auto;
        margin-left: auto;
    }
}

/* =========================================================
   İŞLETME DASHBOARD — KOYU TEMA
   ========================================================= */

.hs-business-dashboard-page {
    width: 80%;
    max-width: 1060px;
    min-width: 0;

    margin: 0 auto;
    padding: 5px 0 120px;
}

/* =========================================================
   HERO
   ========================================================= */

.hs-business-dashboard-hero {
    position: relative;

    width: 100%;

    display: grid;
    grid-template-columns:
        minmax(0, 1fr) auto;
    align-items: center;
    gap: 28px;

    overflow: hidden;

    padding: 30px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 28px;

    background:
        linear-gradient(
            135deg,
            #050505 0%,
            #07101d 100%
        );

    box-shadow:
        0 20px 46px rgba(0, 0, 0, 0.55);
}

.hs-business-dashboard-hero::before {
    content: "";

    position: absolute;
    top: -130px;
    right: -90px;

    width: 330px;
    height: 330px;

    border-radius: 50%;

    background: rgba(37, 99, 235, 0.1);

    pointer-events: none;
}

.hs-business-dashboard-hero-content {
    position: relative;
    z-index: 1;

    min-width: 0;
}

.hs-business-dashboard-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 13px;
    padding: 7px 11px;

    border: 1px solid rgba(96, 165, 250, 0.19);
    border-radius: 999px;

    background: rgba(37, 99, 235, 0.13);
    color: #60a5fa;

    font-size: 10px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.hs-business-dashboard-hero h1 {
    overflow-wrap: anywhere;

    margin: 0;

    color: #f5f5f5;

    font-size: clamp(27px, 4vw, 40px);
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -0.035em;
}

.hs-business-dashboard-hero p {
    max-width: 670px;

    margin: 14px 0 0;

    color: #a3a3a3;

    font-size: 13px;
    line-height: 1.7;
    font-weight: 500;
}

.hs-business-dashboard-address {
    max-width: 680px;

    display: flex;
    align-items: flex-start;
    gap: 8px;

    margin-top: 15px;

    color: #a3a3a3;
}

.hs-business-dashboard-address i {
    flex: 0 0 auto;

    margin-top: 3px;

    color: #60a5fa;

    font-size: 12px;
}

.hs-business-dashboard-address span {
    overflow: hidden;

    font-size: 10.5px;
    line-height: 1.5;
    font-weight: 600;

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

.hs-business-dashboard-hero-image {
    position: relative;
    z-index: 1;

    width: 118px;
    height: 118px;

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

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 28px;

    background: #111827;
    color: #60a5fa;

    box-shadow:
        0 18px 38px rgba(0, 0, 0, 0.46);
}

.hs-business-dashboard-hero-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}

.hs-business-dashboard-hero-image-fallback {
    width: 100%;
    height: 100%;

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

    font-size: 38px;
}

.hs-business-dashboard-hero-image-fallback[hidden] {
    display: none !important;
}

/* =========================================================
   ÖZET
   ========================================================= */

.hs-business-dashboard-summary {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 13px;

    margin-top: 17px;
}

.hs-business-dashboard-summary-item {
    min-width: 0;

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

    padding: 16px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 19px;

    background: #050505;

    box-shadow:
        0 14px 32px rgba(0, 0, 0, 0.4);
}

.hs-business-dashboard-summary-icon {
    flex: 0 0 auto;

    width: 42px;
    height: 42px;

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

    border-radius: 14px;

    font-size: 16px;
}

.hs-business-dashboard-summary-icon.is-status {
    background: rgba(22, 163, 74, 0.16);
    color: #4ade80;
}

.hs-business-dashboard-summary-icon.is-category {
    background: rgba(37, 99, 235, 0.16);
    color: #60a5fa;
}

.hs-business-dashboard-summary-icon.is-rating {
    background: rgba(217, 119, 6, 0.16);
    color: #fbbf24;
}

.hs-business-dashboard-summary-content {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 5px;
}

.hs-business-dashboard-summary-content small {
    overflow: hidden;

    color: #8f8f8f;

    font-size: 9px;
    line-height: 1;
    font-weight: 600;

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

.hs-business-dashboard-summary-content strong {
    overflow: hidden;

    color: #e5e5e5;

    font-size: 13px;
    line-height: 1.2;
    font-weight: 600;

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

/* =========================================================
   MENÜ
   ========================================================= */

.hs-business-dashboard-menu-section {
    width: 100%;

    margin-top: 18px;
    padding: 25px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 25px;

    background: #050505;

    box-shadow:
        0 16px 38px rgba(0, 0, 0, 0.45);
}

.hs-business-dashboard-section-header {
    margin-bottom: 17px;
}

.hs-business-dashboard-section-header > span {
    display: block;

    margin-bottom: 6px;

    color: #60a5fa;

    font-size: 9px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.hs-business-dashboard-section-header h2 {
    margin: 0;

    color: #f5f5f5;

    font-size: 20px;
    line-height: 1.35;
    font-weight: 600;
}

.hs-business-dashboard-section-header p {
    margin: 7px 0 0;

    color: #8f8f8f;

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

.hs-business-dashboard-menu {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hs-business-dashboard-menu-item {
    width: 100%;
    min-width: 0;

    display: grid;
    grid-template-columns:
        auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;

    padding: 13px 14px;

    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 18px;

    background: #0d0d0d;
    color: inherit;

    text-decoration: none;

    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        background-color 0.18s ease,
        box-shadow 0.18s ease;
}

.hs-business-dashboard-menu-item:hover {
    transform: translateY(-2px);

    border-color: rgba(96, 165, 250, 0.23);

    background: #101722;

    box-shadow:
        0 13px 29px rgba(0, 0, 0, 0.4);
}

.hs-business-dashboard-menu-item.is-return {
    margin-top: 5px;

    border-style: dashed;

    background: #101010;
}

.hs-business-dashboard-menu-icon {
    width: 45px;
    height: 45px;

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

    border-radius: 14px;

    font-size: 17px;
}

.hs-business-dashboard-menu-icon.is-image {
    background: rgba(124, 58, 237, 0.17);
    color: #a78bfa;
}

.hs-business-dashboard-menu-icon.is-hours {
    background: rgba(37, 99, 235, 0.17);
    color: #60a5fa;
}

.hs-business-dashboard-menu-icon.is-statistics {
    background: rgba(22, 163, 74, 0.17);
    color: #4ade80;
}

.hs-business-dashboard-menu-icon.is-profile {
    background: rgba(8, 145, 178, 0.17);
    color: #22d3ee;
}

.hs-business-dashboard-menu-icon.is-advertisement {
    background: rgba(249, 115, 22, 0.17);
    color: #fb923c;
}

.hs-business-dashboard-menu-icon.is-plans {
    background: rgba(220, 38, 38, 0.17);
    color: #f87171;
}

.hs-business-dashboard-menu-icon.is-help {
    background: rgba(2, 132, 199, 0.17);
    color: #38bdf8;
}

.hs-business-dashboard-menu-icon.is-return {
    background: #1a1a1a;
    color: #a3a3a3;
}

.hs-business-dashboard-menu-content {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 5px;
}

.hs-business-dashboard-menu-content strong {
    overflow: hidden;

    color: #e5e5e5;

    font-size: 12.5px;
    line-height: 1.3;
    font-weight: 600;

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

.hs-business-dashboard-menu-content small {
    overflow: hidden;

    color: #8f8f8f;

    font-size: 9.5px;
    line-height: 1.45;
    font-weight: 500;

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

.hs-business-dashboard-menu-arrow {
    width: 34px;
    height: 34px;

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

    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 11px;

    background: #171717;
    color: #a3a3a3;

    font-size: 11px;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1050px) {
    .hs-business-dashboard-page {
        width: 88%;
    }
}

@media (max-width: 760px) {
    .hs-business-dashboard-page {
        width: calc(100% - 28px);
    }

    .hs-business-dashboard-hero {
        padding: 24px;
    }

    .hs-business-dashboard-hero-image {
        width: 90px;
        height: 90px;

        border-radius: 23px;
    }

    .hs-business-dashboard-summary {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .hs-business-dashboard-page {
        width: calc(100% - 20px);
        padding-bottom: 90px;
    }

    .hs-business-dashboard-hero {
        grid-template-columns: 1fr;

        padding: 21px;

        border-radius: 22px;
    }

    .hs-business-dashboard-hero-image {
        grid-row: 1;

        width: 76px;
        height: 76px;

        border-radius: 20px;
    }

    .hs-business-dashboard-hero h1 {
        font-size: 27px;
    }

    .hs-business-dashboard-menu-section {
        padding: 17px;

        border-radius: 21px;
    }

    .hs-business-dashboard-menu-content small {
        white-space: normal;
    }
}

@media (max-width: 390px) {
    .hs-business-dashboard-menu-item {
        grid-template-columns:
            auto minmax(0, 1fr);

        padding: 12px;
    }

    .hs-business-dashboard-menu-arrow {
        display: none;
    }

    .hs-business-dashboard-menu-icon {
        width: 41px;
        height: 41px;

        font-size: 15px;
    }
}

.icerik-kart {
    cursor: pointer;
}

.icerik-kart:focus-visible {
    outline: 2px solid var(
        --hs-primary,
        #ff8a00
    );

    outline-offset: 3px;
}

/* =========================================================
   İŞLETME RESMİ — KOYU TEMA
   ========================================================= */

.hs-business-image-page {
    width: 80%;
    max-width: 1000px;
    min-width: 0;

    margin: 0 auto;
    padding: 4px 0 120px;
}

/* HERO */

.hs-business-image-hero {
    width: 100%;

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

    padding: 25px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 25px;

    background:
        linear-gradient(
            135deg,
            #050505 0%,
            #0b111b 100%
        );

    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.5);
}

.hs-business-image-hero-content {
    min-width: 0;
}

.hs-business-image-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    margin-bottom: 10px;
    padding: 7px 10px;

    border: 1px solid rgba(96, 165, 250, 0.18);
    border-radius: 999px;

    background: rgba(37, 99, 235, 0.14);
    color: #60a5fa;

    font-size: 9px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.hs-business-image-hero h1 {
    margin: 0;

    color: #f5f5f5;

    font-size: clamp(24px, 4vw, 34px);
    line-height: 1.2;
    font-weight: 700;
}

.hs-business-image-hero p {
    max-width: 650px;

    margin: 10px 0 0;

    color: #a3a3a3;

    font-size: 12px;
    line-height: 1.6;
    font-weight: 500;
}

.hs-business-image-back {
    flex: 0 0 auto;

    min-height: 42px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 9px 14px;

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 13px;

    background: #111111;
    color: #d4d4d4;

    font-size: 10px;
    font-weight: 600;
    text-decoration: none;
}

/* ANA KART */

.hs-business-image-card {
    display: grid;
    grid-template-columns:
        minmax(260px, 0.85fr)
        minmax(0, 1.55fr);
    gap: 28px;

    margin-top: 18px;
    padding: 28px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 25px;

    background: #050505;

    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.48);
}

/* ÖNİZLEME */

.hs-business-image-preview-section {
    min-width: 0;

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

    padding: 22px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 21px;

    background: #0d0d0d;

    text-align: center;
}

.hs-business-image-section-label {
    margin-bottom: 16px;

    color: #8f8f8f;

    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.hs-business-image-preview {
    position: relative;

    width: 190px;
    height: 190px;

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

    overflow: hidden;

    border: 5px solid #171717;
    border-radius: 50%;

    background: #1a1a1a;
    color: #8f8f8f;

    box-shadow:
        0 18px 38px rgba(0, 0, 0, 0.55);
}

.hs-business-image-preview img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}

.hs-business-image-preview-fallback {
    width: 100%;
    height: 100%;

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

    font-size: 52px;
}

.hs-business-image-preview-fallback[hidden] {
    display: none !important;
}

.hs-business-image-preview-loading {
    position: absolute;
    inset: 0;

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

    background: rgba(5, 5, 5, 0.74);

    backdrop-filter: blur(3px);
}

.hs-business-image-preview-loading::after {
    content: "";

    width: 30px;
    height: 30px;

    border: 3px solid rgba(96, 165, 250, 0.18);
    border-top-color: #60a5fa;
    border-radius: 50%;

    animation:
        hs-business-image-spin
        0.7s linear infinite;
}

.hs-business-image-preview-loading[hidden] {
    display: none !important;
}

.hs-business-image-name {
    max-width: 100%;

    margin-top: 18px;

    overflow: hidden;

    color: #e5e5e5;

    font-size: 15px;
    line-height: 1.3;
    font-weight: 700;

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

.hs-business-image-address {
    max-width: 100%;

    margin-top: 7px;

    overflow: hidden;

    color: #8f8f8f;

    font-size: 9.5px;
    line-height: 1.45;
    font-weight: 500;

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

/* FORM */

.hs-business-image-form-section {
    min-width: 0;

    display: flex;
    flex-direction: column;
}

.hs-business-image-form-header > span {
    display: block;

    margin-bottom: 7px;

    color: #60a5fa;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.hs-business-image-form-header h2 {
    margin: 0;

    color: #f5f5f5;

    font-size: 20px;
    line-height: 1.35;
    font-weight: 700;
}

.hs-business-image-form-header p {
    margin: 8px 0 0;

    color: #8f8f8f;

    font-size: 10.5px;
    line-height: 1.55;
    font-weight: 500;
}

.hs-business-image-select {
    width: 100%;
    min-width: 0;

    display: grid;
    grid-template-columns:
        auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;

    margin-top: 20px;
    padding: 15px;

    border: 1px dashed rgba(255, 255, 255, 0.18);
    border-radius: 18px;

    background: #0d0d0d;
    color: inherit;

    font: inherit;
    text-align: left;

    cursor: pointer;
}

.hs-business-image-select:hover {
    border-color: #60a5fa;

    background: #101722;
}

.hs-business-image-select:disabled {
    opacity: 0.55;
    cursor: wait;
}

.hs-business-image-select-icon {
    width: 44px;
    height: 44px;

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

    border-radius: 14px;

    background: rgba(37, 99, 235, 0.17);
    color: #60a5fa;

    font-size: 18px;
}

.hs-business-image-select-content {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 5px;
}

.hs-business-image-select-content strong {
    color: #e5e5e5;

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

.hs-business-image-select-content small {
    color: #8f8f8f;

    font-size: 9px;
    font-weight: 500;
}

.hs-business-image-select-arrow {
    width: 32px;
    height: 32px;

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

    border-radius: 10px;

    background: #171717;
    color: #a3a3a3;

    font-size: 11px;
}

/* Dosya bilgisi */

.hs-business-image-file-info {
    display: grid;
    grid-template-columns:
        auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;

    margin-top: 12px;
    padding: 12px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 15px;

    background: #0d0d0d;
}

.hs-business-image-file-info[hidden] {
    display: none !important;
}

.hs-business-image-file-icon {
    width: 36px;
    height: 36px;

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

    border-radius: 11px;

    background: rgba(22, 163, 74, 0.17);
    color: #4ade80;

    font-size: 14px;
}

.hs-business-image-file-content {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hs-business-image-file-content strong {
    overflow: hidden;

    color: #e5e5e5;

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

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

.hs-business-image-file-content small {
    color: #8f8f8f;

    font-size: 8.5px;
}

.hs-business-image-file-info button {
    width: 31px;
    height: 31px;

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

    border: 0;
    border-radius: 9px;

    background: #171717;
    color: #a3a3a3;

    font: inherit;
    cursor: pointer;
}

/* Mesaj */

.hs-business-image-message {
    margin-top: 13px;
    padding: 11px 13px;

    border: 1px solid;
    border-radius: 13px;

    font-size: 9.5px;
    line-height: 1.5;
    font-weight: 700;
}

.hs-business-image-message[hidden] {
    display: none !important;
}

.hs-business-image-message.is-error {
    border-color: rgba(248, 113, 113, 0.28);
    background: rgba(220, 38, 38, 0.12);
    color: #fca5a5;
}

.hs-business-image-message.is-success {
    border-color: rgba(74, 222, 128, 0.25);
    background: rgba(22, 163, 74, 0.12);
    color: #86efac;
}

/* Butonlar */

.hs-business-image-actions {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 10px;

    margin-top: auto;
    padding-top: 20px;
}

.hs-business-image-delete,
.hs-business-image-save {
    min-height: 47px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 10px 15px;

    border-radius: 14px;

    font: inherit;
    font-size: 10.5px;
    font-weight: 700;

    cursor: pointer;
}

.hs-business-image-delete {
    border: 1px solid rgba(248, 113, 113, 0.25);

    background: rgba(220, 38, 38, 0.12);
    color: #f87171;
}

.hs-business-image-save {
    border: 1px solid #f5f5f5;

    background: #f5f5f5;
    color: #050505;
}

.hs-business-image-delete:disabled,
.hs-business-image-save:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Not */

.hs-business-image-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    margin-top: 14px;
    padding: 14px 16px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 15px;

    background: #0d0d0d;
    color: #8f8f8f;
}

.hs-business-image-note i {
    flex: 0 0 auto;

    margin-top: 2px;

    color: #60a5fa;

    font-size: 13px;
}

.hs-business-image-note p {
    margin: 0;

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

/* MODALLAR */

body.hs-business-image-modal-open {
    overflow: hidden;
}

.hs-business-image-crop-modal,
.hs-business-image-confirm-modal {
    position: fixed;
    z-index: 12000;
    inset: 0;

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

    padding: 20px;

    visibility: hidden;
    opacity: 0;

    background: rgba(0, 0, 0, 0.78);

    backdrop-filter: blur(7px);

    transition:
        opacity 0.2s ease,
        visibility 0.2s ease;
}

.hs-business-image-crop-modal.is-open,
.hs-business-image-confirm-modal.is-open {
    visibility: visible;
    opacity: 1;
}

.hs-business-image-crop-dialog {
    width: min(100%, 760px);
    max-height: 92vh;

    overflow-y: auto;

    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 23px;

    background: #050505;

    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.7);
}

.hs-business-image-crop-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;

    padding: 20px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.hs-business-image-crop-header > div > span {
    display: block;

    margin-bottom: 5px;

    color: #60a5fa;

    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.hs-business-image-crop-header h2 {
    margin: 0;

    color: #f5f5f5;

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

.hs-business-image-crop-header p {
    margin: 6px 0 0;

    color: #8f8f8f;

    font-size: 9.5px;
}

.hs-business-image-crop-close {
    flex: 0 0 auto;

    width: 36px;
    height: 36px;

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

    border: 0;
    border-radius: 11px;

    background: #171717;
    color: #a3a3a3;

    font: inherit;
    cursor: pointer;
}

.hs-business-image-crop-area {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr) 150px;
    gap: 20px;

    padding: 20px;
}

.hs-business-image-crop-container {
    height: 430px;

    overflow: hidden;

    border-radius: 18px;

    background: #000000;
}

.hs-business-image-crop-container img {
    display: block;

    max-width: 100%;
}

.hs-business-image-crop-preview-wrap {
    display: flex;
    align-items: center;
    flex-direction: column;

    padding: 14px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 17px;

    background: #0d0d0d;
}

.hs-business-image-crop-preview-wrap > span {
    margin-bottom: 12px;

    color: #8f8f8f;

    font-size: 8.5px;
    font-weight: 600;
}

.hs-business-image-crop-preview {
    width: 115px;
    height: 115px;

    overflow: hidden;

    border: 4px solid #171717;
    border-radius: 50%;

    background: #1a1a1a;

    box-shadow:
        0 13px 29px rgba(0, 0, 0, 0.48);
}

.hs-business-image-crop-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    padding: 0 20px 18px;
}

.hs-business-image-crop-controls button {
    width: 40px;
    height: 40px;

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

    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 12px;

    background: #111111;
    color: #d4d4d4;

    font: inherit;
    cursor: pointer;
}

.hs-business-image-crop-actions {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 10px;

    padding: 17px 20px 20px;

    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.hs-business-image-crop-cancel,
.hs-business-image-crop-apply {
    min-height: 45px;

    border-radius: 13px;

    font: inherit;
    font-size: 10.5px;
    font-weight: 700;

    cursor: pointer;
}

.hs-business-image-crop-cancel {
    border: 1px solid rgba(255, 255, 255, 0.09);

    background: #111111;
    color: #a3a3a3;
}

.hs-business-image-crop-apply {
    border: 1px solid #f5f5f5;

    background: #f5f5f5;
    color: #050505;
}

/* Silme modalı */

.hs-business-image-confirm-dialog {
    width: min(100%, 420px);

    padding: 26px;

    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 23px;

    background: #050505;

    text-align: center;

    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.7);
}

.hs-business-image-confirm-icon {
    width: 58px;
    height: 58px;

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

    margin: 0 auto 14px;

    border-radius: 18px;

    background: rgba(220, 38, 38, 0.14);
    color: #f87171;

    font-size: 21px;
}

.hs-business-image-confirm-dialog h2 {
    margin: 0;

    color: #f5f5f5;

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

.hs-business-image-confirm-dialog p {
    margin: 10px 0 0;

    color: #8f8f8f;

    font-size: 10px;
    line-height: 1.55;
}

.hs-business-image-confirm-actions {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 9px;

    margin-top: 21px;
}

.hs-business-image-confirm-cancel,
.hs-business-image-confirm-delete {
    min-height: 43px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    border-radius: 13px;

    font: inherit;
    font-size: 10px;
    font-weight: 700;

    cursor: pointer;
}

.hs-business-image-confirm-cancel {
    border: 1px solid rgba(255, 255, 255, 0.09);

    background: #111111;
    color: #a3a3a3;
}

.hs-business-image-confirm-delete {
    border: 1px solid #dc2626;

    background: #dc2626;
    color: #ffffff;
}

.hs-business-image-spinner {
    width: 17px;
    height: 17px;

    display: inline-block;

    border: 2px solid rgba(255, 255, 255, 0.25);
    border-top-color: currentColor;
    border-radius: 50%;

    animation:
        hs-business-image-spin
        0.7s linear infinite;
}

.hs-business-image-spinner[hidden] {
    display: none !important;
}

@keyframes hs-business-image-spin {
    to {
        transform: rotate(360deg);
    }
}

/* RESPONSIVE */

@media (max-width: 900px) {
    .hs-business-image-page {
        width: 90%;
    }
}

@media (max-width: 700px) {
    .hs-business-image-page {
        width: calc(100% - 28px);
    }

    .hs-business-image-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .hs-business-image-card {
        grid-template-columns: 1fr;
    }

    .hs-business-image-crop-area {
        grid-template-columns: 1fr;
    }

    .hs-business-image-crop-preview-wrap {
        display: none;
    }
}

@media (max-width: 500px) {
    .hs-business-image-page {
        width: calc(100% - 20px);
        padding-bottom: 90px;
    }

    .hs-business-image-hero {
        padding: 20px;

        border-radius: 21px;
    }

    .hs-business-image-back {
        width: 100%;
    }

    .hs-business-image-card {
        padding: 17px;

        border-radius: 21px;
    }

    .hs-business-image-preview {
        width: 160px;
        height: 160px;
    }

    .hs-business-image-actions,
    .hs-business-image-crop-actions,
    .hs-business-image-confirm-actions {
        grid-template-columns: 1fr;
    }

    .hs-business-image-crop-modal {
        align-items: flex-end;

        padding: 0;
    }

    .hs-business-image-crop-dialog {
        width: 100%;
        max-height: 94vh;

        border-right: 0;
        border-bottom: 0;
        border-left: 0;
        border-radius: 22px 22px 0 0;
    }

    .hs-business-image-crop-container {
        height: 360px;
    }
}

/* =========================================================
   İŞLETME ÇALIŞMA SAATLERİ — KOYU TEMA
   ========================================================= */

.hs-business-hours-page {
    width: min(80%, 1050px);
    min-width: 0;

    margin: 0 auto;
    padding: 4px 0 120px;
}

/* =========================================================
   HERO
   ========================================================= */

.hs-business-hours-hero {
    position: relative;

    width: 100%;

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

    padding: 28px;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 26px;

    background:
        linear-gradient(
            135deg,
            #050505 0%,
            #0b111b 100%
        );

    box-shadow:
        0 18px 44px rgba(0, 0, 0, 0.52);
}

.hs-business-hours-hero::before {
    content: "";

    position: absolute;
    top: -110px;
    right: -90px;

    width: 280px;
    height: 280px;

    border-radius: 50%;

    background:
        rgba(59, 130, 246, 0.085);

    pointer-events: none;
}

.hs-business-hours-hero-content {
    position: relative;
    z-index: 1;

    min-width: 0;
    max-width: 720px;
}

.hs-business-hours-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 12px;
    padding: 7px 11px;

    border: 1px solid rgba(96, 165, 250, 0.19);
    border-radius: 999px;

    background:
        rgba(37, 99, 235, 0.14);

    color: #60a5fa;

    font-size: 10px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.hs-business-hours-hero h1 {
    margin: 0;

    color: #f5f5f5;

    font-size: clamp(26px, 4vw, 38px);
    line-height: 1.18;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.hs-business-hours-hero p {
    max-width: 680px;

    margin: 13px 0 0;

    color: #a3a3a3;

    font-size: 13px;
    line-height: 1.65;
    font-weight: 500;
}

.hs-business-hours-address {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    max-width: 100%;

    margin-top: 15px;
    padding: 9px 12px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;

    background:
        rgba(255, 255, 255, 0.035);

    color: #a3a3a3;

    font-size: 10px;
    line-height: 1.35;
    font-weight: 600;
}

.hs-business-hours-address i {
    flex: 0 0 auto;

    color: #60a5fa;
}

.hs-business-hours-address span {
    overflow: hidden;

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

.hs-business-hours-back {
    position: relative;
    z-index: 1;

    flex: 0 0 auto;

    min-height: 44px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 10px 15px;

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;

    background: #111111;
    color: #d4d4d4;

    font-size: 10.5px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;

    box-shadow:
        0 9px 20px rgba(0, 0, 0, 0.28);

    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        background-color 0.18s ease;
}

.hs-business-hours-back:hover {
    transform: translateY(-1px);

    border-color: rgba(255, 255, 255, 0.18);

    background: #171717;
}

/* =========================================================
   ANA KART
   ========================================================= */

.hs-business-hours-card {
    width: 100%;

    margin-top: 20px;
    padding: 25px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 25px;

    background: #050505;

    box-shadow:
        0 18px 44px rgba(0, 0, 0, 0.5);
}

.hs-business-hours-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;

    padding-bottom: 20px;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.08);
}

.hs-business-hours-card-header > div:first-child {
    min-width: 0;
}

.hs-business-hours-card-header > div:first-child > span {
    display: block;

    margin-bottom: 7px;

    color: #60a5fa;

    font-size: 9px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.hs-business-hours-card-header h2 {
    margin: 0;

    color: #f5f5f5;

    font-size: 21px;
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: -0.018em;
}

.hs-business-hours-card-header p {
    max-width: 650px;

    margin: 8px 0 0;

    color: #8f8f8f;

    font-size: 11px;
    line-height: 1.55;
    font-weight: 500;
}

.hs-business-hours-card-icon {
    flex: 0 0 auto;

    width: 54px;
    height: 54px;

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

    border: 1px solid rgba(96, 165, 250, 0.17);
    border-radius: 17px;

    background:
        rgba(37, 99, 235, 0.13);

    color: #60a5fa;

    font-size: 22px;
}

/* =========================================================
   TABLO
   ========================================================= */

.hs-business-hours-table {
    width: 100%;

    margin-top: 20px;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;

    background: #080808;
}

.hs-business-hours-table-head,
.hs-business-hours-row {
    display: grid;
    grid-template-columns:
        minmax(180px, 1.4fr)
        minmax(130px, 1fr)
        minmax(130px, 1fr)
        minmax(130px, 0.9fr);
    align-items: center;
    gap: 14px;
}

.hs-business-hours-table-head {
    min-height: 48px;

    padding: 0 17px;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.08);

    background: #0d0d0d;
}

.hs-business-hours-table-head span {
    color: #8f8f8f;

    font-size: 9px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.hs-business-hours-row {
    min-height: 78px;

    padding: 14px 17px;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.065);

    background: #080808;

    transition:
        background-color 0.18s ease,
        opacity 0.18s ease;
}

.hs-business-hours-row:last-child {
    border-bottom: 0;
}

.hs-business-hours-row:hover {
    background: #0d0d0d;
}

.hs-business-hours-row.is-closed {
    background: #0b0b0b;
}

.hs-business-hours-row.is-closed
.hs-business-hours-day,
.hs-business-hours-row.is-closed
.hs-business-hours-select-wrapper {
    opacity: 0.52;
}

/* =========================================================
   GÜN ALANI
   ========================================================= */

.hs-business-hours-day {
    min-width: 0;

    display: flex;
    align-items: center;
    gap: 11px;
}

.hs-business-hours-day-icon {
    flex: 0 0 auto;

    width: 40px;
    height: 40px;

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

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 13px;

    background: #111111;
    color: #b8b8b8;

    font-size: 15px;
}

.hs-business-hours-day-content {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hs-business-hours-day-content strong {
    overflow: hidden;

    color: #e5e5e5;

    font-size: 12.5px;
    line-height: 1.25;
    font-weight: 700;

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

.hs-business-hours-day-content small {
    color: #737373;

    font-size: 8.5px;
    line-height: 1;
    font-weight: 600;
}

/* =========================================================
   SELECT
   ========================================================= */

.hs-business-hours-select-wrapper {
    min-width: 0;
}

.hs-business-hours-mobile-label {
    display: none;
}

.hs-business-hours-select-wrapper select {
    width: 100%;
    min-width: 0;
    height: 44px;

    padding: 0 38px 0 13px;

    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 13px;

    background-color: #111111;
    color: #e5e5e5;

    font: inherit;
    font-size: 11px;
    line-height: 1;
    font-weight: 600;

    cursor: pointer;

    outline: none;

    color-scheme: dark;

    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background-color 0.18s ease;
}

.hs-business-hours-select-wrapper select:hover {
    border-color: rgba(255, 255, 255, 0.2);
}

.hs-business-hours-select-wrapper select:focus {
    border-color: #60a5fa;

    box-shadow:
        0 0 0 3px rgba(96, 165, 250, 0.13);
}

.hs-business-hours-select-wrapper select:disabled {
    border-color: rgba(255, 255, 255, 0.06);

    background: #0d0d0d;
    color: #666666;

    cursor: not-allowed;
}

/* =========================================================
   AÇIK / KAPALI SWITCH
   ========================================================= */

.hs-business-hours-status {
    min-width: 0;

    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 9px;

    cursor: pointer;
    user-select: none;
}

.hs-business-hours-status input {
    position: absolute;

    width: 1px;
    height: 1px;

    overflow: hidden;

    opacity: 0;

    pointer-events: none;
}

.hs-business-hours-status-switch {
    position: relative;

    flex: 0 0 auto;

    width: 43px;
    height: 24px;

    display: inline-flex;

    border-radius: 999px;

    background: #16a34a;

    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.1);

    transition:
        background-color 0.18s ease;
}

.hs-business-hours-status-switch > span {
    position: absolute;
    top: 3px;
    left: 22px;

    width: 18px;
    height: 18px;

    border-radius: 50%;

    background: #ffffff;

    box-shadow:
        0 2px 7px rgba(0, 0, 0, 0.42);

    transition:
        left 0.18s ease,
        transform 0.18s ease;
}

.hs-business-hours-status
input:checked
+
.hs-business-hours-status-switch {
    background: #dc2626;
}

.hs-business-hours-status
input:checked
+
.hs-business-hours-status-switch
>
span {
    left: 3px;
}

.hs-business-hours-status
input:focus-visible
+
.hs-business-hours-status-switch {
    box-shadow:
        0 0 0 3px rgba(96, 165, 250, 0.14);
}

.hs-business-hours-status-text {
    color: #4ade80;

    font-size: 10px;
    line-height: 1;
    font-weight: 700;
}

.hs-business-hours-status
input:checked
~
.hs-business-hours-status-text {
    color: #f87171;
}

/* =========================================================
   MESAJ
   ========================================================= */

.hs-business-hours-message {
    margin-top: 15px;
    padding: 13px 15px;

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

    font-size: 10.5px;
    line-height: 1.5;
    font-weight: 700;
}

.hs-business-hours-message[hidden] {
    display: none !important;
}

.hs-business-hours-message.is-error {
    border-color: rgba(248, 113, 113, 0.28);

    background:
        rgba(220, 38, 38, 0.12);

    color: #fca5a5;
}

.hs-business-hours-message.is-success {
    border-color: rgba(74, 222, 128, 0.26);

    background:
        rgba(22, 163, 74, 0.12);

    color: #86efac;
}

/* =========================================================
   FOOTER
   ========================================================= */

.hs-business-hours-footer {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        auto;
    align-items: center;
    gap: 18px;

    margin-top: 18px;
    padding-top: 18px;

    border-top:
        1px solid rgba(255, 255, 255, 0.08);
}

.hs-business-hours-footer-info {
    min-width: 0;

    display: flex;
    align-items: flex-start;
    gap: 9px;

    color: #8f8f8f;
}

.hs-business-hours-footer-info i {
    flex: 0 0 auto;

    margin-top: 2px;

    color: #60a5fa;

    font-size: 13px;
}

.hs-business-hours-footer-info span {
    max-width: 620px;

    font-size: 9.5px;
    line-height: 1.5;
    font-weight: 550;
}

.hs-business-hours-save {
    min-width: 230px;
    min-height: 48px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    padding: 11px 18px;

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

    background: #f5f5f5;
    color: #050505;

    font: inherit;
    font-size: 11px;
    line-height: 1;
    font-weight: 700;

    cursor: pointer;

    box-shadow:
        0 11px 25px rgba(0, 0, 0, 0.32);

    transition:
        transform 0.18s ease,
        background-color 0.18s ease,
        box-shadow 0.18s ease;
}

.hs-business-hours-save:hover:not(:disabled) {
    transform: translateY(-1px);

    background: #ffffff;

    box-shadow:
        0 14px 29px rgba(0, 0, 0, 0.4);
}

.hs-business-hours-save:disabled {
    opacity: 0.58;

    cursor: wait;
    transform: none;
}

.hs-business-hours-spinner {
    width: 18px;
    height: 18px;

    display: inline-block;

    border: 2px solid rgba(5, 5, 5, 0.22);
    border-top-color: #050505;
    border-radius: 50%;

    animation:
        hs-business-hours-spin
        0.7s linear infinite;
}

.hs-business-hours-spinner[hidden] {
    display: none !important;
}

@keyframes hs-business-hours-spin {
    to {
        transform: rotate(360deg);
    }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1050px) {
    .hs-business-hours-page {
        width: 90%;
    }
}

@media (max-width: 820px) {
    .hs-business-hours-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .hs-business-hours-back {
        width: 100%;
    }

    .hs-business-hours-table-head,
    .hs-business-hours-row {
        grid-template-columns:
            minmax(160px, 1.25fr)
            minmax(110px, 1fr)
            minmax(110px, 1fr)
            minmax(105px, 0.85fr);
        gap: 10px;
    }

    .hs-business-hours-footer {
        grid-template-columns: 1fr;
    }

    .hs-business-hours-save {
        width: 100%;
    }
}

@media (max-width: 680px) {
    .hs-business-hours-page {
        width: calc(100% - 28px);
    }

    .hs-business-hours-hero {
        padding: 21px;

        border-radius: 22px;
    }

    .hs-business-hours-card {
        padding: 18px;

        border-radius: 22px;
    }

    .hs-business-hours-card-icon {
        display: none;
    }

    .hs-business-hours-table {
        overflow: visible;

        border: 0;
        border-radius: 0;

        background: transparent;
    }

    .hs-business-hours-table-head {
        display: none;
    }

    .hs-business-hours-row {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        gap: 13px;

        min-height: 0;

        margin-bottom: 12px;
        padding: 15px;

        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 17px;

        background: #080808;

        box-shadow:
            0 10px 24px rgba(0, 0, 0, 0.28);
    }

    .hs-business-hours-row:last-child {
        margin-bottom: 0;

        border-bottom:
            1px solid rgba(255, 255, 255, 0.08);
    }

    .hs-business-hours-day {
        grid-column: 1 / -1;

        padding-bottom: 11px;

        border-bottom:
            1px solid rgba(255, 255, 255, 0.07);
    }

    .hs-business-hours-mobile-label {
        display: block;

        margin-bottom: 7px;

        color: #8f8f8f;

        font-size: 8.5px;
        line-height: 1;
        font-weight: 600;
        text-transform: uppercase;
    }

    .hs-business-hours-status {
        grid-column: 1 / -1;

        min-height: 43px;

        justify-content: space-between;

        padding: 0 4px;
    }
}

@media (max-width: 440px) {
    .hs-business-hours-page {
        width: calc(100% - 20px);

        padding-bottom: 90px;
    }

    .hs-business-hours-hero h1 {
        font-size: 25px;
    }

    .hs-business-hours-card-header h2 {
        font-size: 18px;
    }

    .hs-business-hours-row {
        grid-template-columns: 1fr;
    }

    .hs-business-hours-day,
    .hs-business-hours-status {
        grid-column: auto;
    }

    .hs-business-hours-status {
        margin-top: 2px;
    }
}

/* =========================================================
   REKLAM MEDYA SEÇİCİ — KOYU TEMA
   ========================================================= */

.reklam-medya-secici {
    position: relative;

    width: 100%;
    min-width: 0;
}

/* =========================================================
   BAŞLIK
   ========================================================= */

.reklam-medya-secici-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    margin-bottom: 14px;
}

.reklam-medya-secici-baslik {
    min-width: 0;

    display: flex;
    align-items: center;
    gap: 11px;
}

.reklam-medya-secici-baslik-ikon {
    flex: 0 0 auto;

    width: 42px;
    height: 42px;

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

    border: 1px solid rgba(96, 165, 250, 0.17);
    border-radius: 14px;

    background: rgba(37, 99, 235, 0.15);
    color: #60a5fa;

    font-size: 17px;
}

.reklam-medya-secici-baslik-metin {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 4px;
}

.reklam-medya-secici-baslik-metin strong {
    color: #e5e5e5;

    font-size: 13px;
    line-height: 1.25;
    font-weight: 700;
}

.reklam-medya-secici-baslik-metin small {
    overflow: hidden;

    color: #8f8f8f;

    font-size: 9.5px;
    line-height: 1.35;
    font-weight: 550;

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

.reklam-medya-secici-sayac {
    flex: 0 0 auto;

    min-width: 48px;

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

    padding: 7px 10px;

    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 999px;

    background: #111111;
    color: #b8b8b8;

    font-size: 9.5px;
    line-height: 1;
    font-weight: 700;
}

/* =========================================================
   YATAY LİSTE
   ========================================================= */

.reklam-medya-kaydirma {
    display: flex;
    align-items: stretch;
    gap: 12px;

    width: 100%;

    overflow-x: auto;
    overflow-y: hidden;

    padding: 3px 3px 11px;

    scrollbar-width: thin;
    scrollbar-color:
        #3f3f46
        transparent;
}

.reklam-medya-kaydirma::-webkit-scrollbar {
    height: 6px;
}

.reklam-medya-kaydirma::-webkit-scrollbar-track {
    background: transparent;
}

.reklam-medya-kaydirma::-webkit-scrollbar-thumb {
    border-radius: 999px;

    background: #3f3f46;
}

.reklam-medya-listesi {
    display: contents;
}

/* =========================================================
   MEDYA KARTI
   ========================================================= */

.reklam-medya-karti {
    position: relative;

    flex: 0 0 180px;

    width: 180px;
    height: 250px;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;

    background: #080808;

    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.42);

    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}

.reklam-medya-karti:hover {
    transform: translateY(-2px);

    border-color: rgba(255, 255, 255, 0.16);

    box-shadow:
        0 18px 36px rgba(0, 0, 0, 0.55);
}

.reklam-medya-onizleme {
    position: relative;

    width: 100%;
    height: 170px;

    overflow: hidden;

    background: #171717;
}

.reklam-medya-onizleme > img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}

.reklam-medya-video-onizleme {
    position: relative;

    width: 100%;
    height: 100%;

    display: block;

    padding: 0;
    overflow: hidden;

    border: 0;

    background: #000000;

    cursor: pointer;
}

.reklam-medya-video-onizleme video {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    pointer-events: none;
}

.reklam-medya-video-play {
    position: absolute;
    top: 50%;
    left: 50%;

    width: 44px;
    height: 44px;

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

    border: 1px solid rgba(255, 255, 255, 0.27);
    border-radius: 50%;

    background: rgba(0, 0, 0, 0.72);
    color: #ffffff;

    font-size: 15px;

    box-shadow:
        0 9px 24px rgba(0, 0, 0, 0.45);

    transform: translate(
        -50%,
        -50%
    );

    backdrop-filter: blur(6px);
}

.reklam-medya-tip-etiketi {
    position: absolute;
    top: 10px;
    left: 10px;

    display: inline-flex;
    align-items: center;
    gap: 5px;

    min-height: 25px;
    padding: 5px 8px;

    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 999px;

    color: #ffffff;

    font-size: 8px;
    line-height: 1;
    font-weight: 700;

    box-shadow:
        0 6px 15px rgba(0, 0, 0, 0.38);

    backdrop-filter: blur(7px);
}

.reklam-medya-tip-etiketi.resim {
    background: rgba(37, 99, 235, 0.88);
}

.reklam-medya-tip-etiketi.video {
    background: rgba(147, 51, 234, 0.9);
}

.reklam-medya-sil {
    position: absolute;
    top: 9px;
    right: 9px;

    width: 29px;
    height: 29px;

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

    border: 1px solid rgba(255, 255, 255, 0.23);
    border-radius: 50%;

    background: rgba(0, 0, 0, 0.75);
    color: #ffffff;

    font: inherit;
    font-size: 11px;

    cursor: pointer;

    backdrop-filter: blur(7px);

    transition:
        background-color 0.18s ease,
        transform 0.18s ease;
}

.reklam-medya-sil:hover {
    transform: scale(1.05);

    background: #dc2626;
}

.reklam-medya-dosya-bilgisi {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 4px;

    padding: 10px 11px 7px;
}

.reklam-medya-dosya-bilgisi strong {
    overflow: hidden;

    color: #e5e5e5;

    font-size: 9.5px;
    line-height: 1.25;
    font-weight: 600;

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

.reklam-medya-dosya-bilgisi small {
    color: #737373;

    font-size: 8px;
    line-height: 1;
    font-weight: 600;
}

/* =========================================================
   SIRALAMA
   ========================================================= */

.reklam-medya-siralama {
    position: absolute;
    right: 9px;
    bottom: 8px;
    left: 9px;

    height: 34px;

    display: grid;
    grid-template-columns:
        32px minmax(0, 1fr) 32px;
    align-items: center;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 11px;

    background: #111111;
}

.reklam-medya-siralama button {
    width: 32px;
    height: 32px;

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

    border: 0;

    background: transparent;
    color: #b8b8b8;

    font: inherit;
    font-size: 9px;

    cursor: pointer;

    transition:
        background-color 0.18s ease,
        color 0.18s ease;
}

.reklam-medya-siralama button:hover:not(:disabled) {
    background: #1f1f1f;
    color: #60a5fa;
}

.reklam-medya-siralama button:disabled {
    opacity: 0.25;
    cursor: not-allowed;
}

.reklam-medya-siralama span {
    display: flex;
    align-items: center;
    justify-content: center;

    height: 100%;

    border-right: 1px solid rgba(255, 255, 255, 0.08);
    border-left: 1px solid rgba(255, 255, 255, 0.08);

    color: #d4d4d4;

    font-size: 9px;
    line-height: 1;
    font-weight: 700;
}

/* =========================================================
   MEDYA EKLE KARTI
   ========================================================= */

.reklam-medya-ekle-karti {
    flex: 0 0 180px;

    width: 180px;
    min-height: 250px;

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

    padding: 20px;

    border: 1px dashed rgba(255, 255, 255, 0.17);
    border-radius: 18px;

    background: #0d0d0d;
    color: #a3a3a3;

    font: inherit;

    cursor: pointer;

    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        background-color 0.18s ease;
}

.reklam-medya-ekle-karti:hover {
    transform: translateY(-2px);

    border-color: #60a5fa;

    background: #101722;
}

.reklam-medya-ekle-karti[hidden] {
    display: none !important;
}

.reklam-medya-ekle-ikon {
    width: 48px;
    height: 48px;

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

    border-radius: 16px;

    background: rgba(37, 99, 235, 0.16);
    color: #60a5fa;

    font-size: 18px;
}

.reklam-medya-ekle-karti strong {
    color: #d4d4d4;

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

.reklam-medya-ekle-karti small {
    color: #737373;

    font-size: 8.5px;
    font-weight: 600;
}

/* =========================================================
   NOT
   ========================================================= */

.reklam-medya-secici-not {
    display: flex;
    align-items: flex-start;
    gap: 8px;

    margin-top: 5px;

    color: #8f8f8f;
}

.reklam-medya-secici-not i {
    flex: 0 0 auto;

    margin-top: 2px;

    color: #60a5fa;

    font-size: 11px;
}

.reklam-medya-secici-not span {
    font-size: 9px;
    line-height: 1.5;
    font-weight: 550;
}

/* =========================================================
   SHEET
   ========================================================= */

body.reklam-medya-modal-acik {
    overflow: hidden;
}

.reklam-medya-sheet,
.reklam-medya-video-modal {
    position: fixed;
    z-index: 13000;
    inset: 0;

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

    padding: 20px;

    visibility: hidden;
    opacity: 0;

    background: rgba(0, 0, 0, 0.78);

    backdrop-filter: blur(7px);

    transition:
        opacity 0.2s ease,
        visibility 0.2s ease;
}

.reklam-medya-sheet.acik,
.reklam-medya-video-modal.acik {
    visibility: visible;
    opacity: 1;
}

.reklam-medya-sheet-dialog {
    width: min(100%, 480px);

    padding: 20px;

    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 23px;

    background: #080808;

    box-shadow:
        0 32px 85px rgba(0, 0, 0, 0.72);

    transform: translateY(12px) scale(0.985);

    transition:
        transform 0.2s ease;
}

.reklam-medya-sheet.acik
.reklam-medya-sheet-dialog {
    transform: translateY(0) scale(1);
}

.reklam-medya-sheet-tutamac {
    display: none;

    width: 44px;
    height: 4px;

    margin: 0 auto 17px;

    border-radius: 999px;

    background: #404040;
}

.reklam-medya-sheet-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;

    margin-bottom: 17px;
}

.reklam-medya-sheet-header h2 {
    margin: 0;

    color: #f5f5f5;

    font-size: 18px;
    line-height: 1.3;
    font-weight: 700;
}

.reklam-medya-sheet-header p {
    margin: 6px 0 0;

    color: #8f8f8f;

    font-size: 9.5px;
    line-height: 1.5;
    font-weight: 500;
}

.reklam-medya-sheet-kapat,
.reklam-medya-video-kapat {
    flex: 0 0 auto;

    width: 36px;
    height: 36px;

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

    border: 0;
    border-radius: 11px;

    background: #171717;
    color: #a3a3a3;

    font: inherit;
    cursor: pointer;
}

.reklam-medya-secenek {
    width: 100%;

    display: grid;
    grid-template-columns:
        auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;

    padding: 14px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;

    background: #0d0d0d;
    color: inherit;

    font: inherit;
    text-align: left;

    cursor: pointer;

    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        background-color 0.18s ease;
}

.reklam-medya-secenek
+ .reklam-medya-secenek {
    margin-top: 10px;
}

.reklam-medya-secenek:hover {
    transform: translateY(-1px);

    border-color: rgba(255, 255, 255, 0.16);

    background: #131313;
}

.reklam-medya-secenek-ikon {
    width: 43px;
    height: 43px;

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

    border-radius: 14px;

    background: rgba(37, 99, 235, 0.16);
    color: #60a5fa;

    font-size: 17px;
}

.reklam-medya-secenek-metin {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 4px;
}

.reklam-medya-secenek-metin strong {
    color: #e5e5e5;

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

.reklam-medya-secenek-metin small {
    color: #8f8f8f;

    font-size: 8.7px;
    line-height: 1.4;
    font-weight: 500;
}

.reklam-medya-secenek
> i {
    color: #737373;

    font-size: 10px;
}

/* =========================================================
   VİDEO MODALI
   ========================================================= */

.reklam-medya-video-dialog {
    width: min(100%, 820px);
    max-height: 92vh;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 23px;

    background: #080808;

    box-shadow:
        0 32px 85px rgba(0, 0, 0, 0.75);
}

.reklam-medya-video-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    padding: 17px 19px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.reklam-medya-video-header span {
    display: block;

    margin-bottom: 4px;

    color: #c084fc;

    font-size: 8px;
    line-height: 1;
    font-weight: 700;
    text-transform: uppercase;
}

.reklam-medya-video-header h2 {
    margin: 0;

    color: #f5f5f5;

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

.reklam-medya-video-alani {
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 18px;

    background: #000000;
}

.reklam-medya-video-alani video {
    width: 100%;
    max-height: 70vh;

    display: block;

    border-radius: 14px;

    background: #000000;
}

/* =========================================================
   TOAST
   ========================================================= */

.reklam-medya-toast-alani {
    position: fixed;
    z-index: 15000;
    right: 18px;
    bottom: 18px;

    width: min(
        calc(100% - 36px),
        340px
    );

    display: flex;
    flex-direction: column;
    gap: 9px;

    pointer-events: none;
}

.reklam-medya-toast {
    display: flex;
    align-items: flex-start;
    gap: 9px;

    padding: 12px 14px;

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

    opacity: 0;

    font-size: 9.5px;
    line-height: 1.45;
    font-weight: 700;

    box-shadow:
        0 16px 38px rgba(0, 0, 0, 0.48);

    transform: translateY(8px);

    transition:
        opacity 0.22s ease,
        transform 0.22s ease;
}

.reklam-medya-toast.goster {
    opacity: 1;

    transform: translateY(0);
}

.reklam-medya-toast.success {
    border-color: rgba(74, 222, 128, 0.25);

    background: #102117;
    color: #86efac;
}

.reklam-medya-toast.warning {
    border-color: rgba(250, 204, 21, 0.26);

    background: #271f08;
    color: #fde68a;
}

.reklam-medya-toast.error {
    border-color: rgba(248, 113, 113, 0.27);

    background: #270d0d;
    color: #fca5a5;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 600px) {
    .reklam-medya-karti,
    .reklam-medya-ekle-karti {
        flex-basis: 160px;

        width: 160px;
    }

    .reklam-medya-secici-baslik-metin small {
        display: none;
    }

    .reklam-medya-sheet {
        align-items: flex-end;

        padding: 0;
    }

    .reklam-medya-sheet-dialog {
        width: 100%;

        padding: 17px 17px 24px;

        border-right: 0;
        border-bottom: 0;
        border-left: 0;
        border-radius: 23px 23px 0 0;
    }

    .reklam-medya-sheet-tutamac {
        display: block;
    }

    .reklam-medya-video-modal {
        padding: 10px;
    }

    .reklam-medya-video-dialog {
        border-radius: 18px;
    }

    .reklam-medya-video-alani {
        padding: 10px;
    }
}

.hs-business-dashboard-menu-icon.is-ad-history {
    background: rgba(124, 58, 237, 0.1);
    color: #7c3aed;
}

.hs-business-dashboard-menu-icon.is-ad-history svg {
    width: 23px;
    height: 23px;
}

.hs-business-dashboard-menu-arrow svg {
    width: 18px;
    height: 18px;
}

/* =====================================================
   REKLAM EKLE — KOYU TEMA
===================================================== */

.hs-ad-create-card {
    margin-top: 22px;
    padding: 24px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;

    background: #0d0d0d;

    box-shadow:
        0 14px 32px rgba(0, 0, 0, 0.38);
}

.hs-ad-create-business {
    display: flex;
    align-items: center;
    gap: 18px;

    margin-bottom: 24px;
}

.hs-ad-create-business-image {
    flex-shrink: 0;

    width: 92px;
    height: 92px;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;

    background: #171717;
}

.hs-ad-create-business-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}

.hs-ad-create-business-info h2 {
    margin: 0;

    color: #f5f5f5;

    font-size: 22px;
    line-height: 1.3;
    font-weight: 700;
}

.hs-ad-create-business-info p {
    margin: 8px 0 0;

    color: #a3a3a3;

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

.hs-ad-create-right-box {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;

    margin-bottom: 28px;
}

.hs-ad-create-right-item {
    min-width: 180px;
    padding: 16px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;

    background: #171717;
}

.hs-ad-create-right-item small {
    display: block;

    margin-bottom: 6px;

    color: #8f8f8f;
}

.hs-ad-create-right-item strong {
    color: #f5f5f5;

    font-size: 22px;
    font-weight: 600;
}

.hs-ad-create-form-group {
    margin-bottom: 22px;
}

.hs-ad-create-form-group label {
    display: block;

    margin-bottom: 8px;

    color: #e5e5e5;

    font-weight: 600;
}

.hs-ad-create-form-group textarea {
    width: 100%;
    min-height: 140px;

    padding: 14px;

    resize: vertical;

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;

    outline: none;

    background: #171717;
    color: #f5f5f5;

    font: inherit;

    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background-color 0.18s ease;
}

.hs-ad-create-form-group textarea::placeholder {
    color: #737373;
}

.hs-ad-create-form-group textarea:hover {
    border-color: rgba(255, 255, 255, 0.18);
}

.hs-ad-create-form-group textarea:focus {
    border-color: #60a5fa;

    background: #1b1b1b;

    box-shadow:
        0 0 0 3px rgba(96, 165, 250, 0.12);
}

.hs-ad-create-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;

    margin-top: 30px;
}

.hs-ad-create-btn {
    padding: 13px 22px;

    border: none;
    border-radius: 12px;

    font: inherit;
    font-weight: 600;

    cursor: pointer;

    transition:
        background-color 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease;
}

.hs-ad-create-btn:hover {
    transform: translateY(-1px);
}

.hs-ad-create-btn-primary {
    background: #dc2626;
    color: #ffffff;
}

.hs-ad-create-btn-primary:hover {
    background: #b91c1c;
}

.hs-ad-create-btn-secondary {
    border: 1px solid rgba(255, 255, 255, 0.08);

    background: #262626;
    color: #f5f5f5;
}

.hs-ad-create-btn-secondary:hover {
    background: #333333;
}

/* =====================================================
   HAK YOK — KOYU TEMA
===================================================== */

.hs-ad-create-no-rights {
    position: relative;

    margin-top: 24px;
    padding: 45px 28px;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;

    background: #0d0d0d;

    text-align: center;

    box-shadow:
        0 14px 34px rgba(0, 0, 0, 0.4);
}

.hs-ad-create-no-rights-icon {
    width: 82px;
    height: 82px;

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

    margin: auto;

    border: 1px solid rgba(248, 113, 113, 0.16);
    border-radius: 50%;

    background: rgba(220, 38, 38, 0.13);
    color: #f87171;

    font-size: 34px;

    box-shadow:
        0 12px 28px rgba(220, 38, 38, 0.1);
}

.hs-ad-create-no-rights h2 {
    margin: 22px 0 10px;

    color: #f5f5f5;

    font-size: 23px;
    line-height: 1.35;
    font-weight: 600;
}

.hs-ad-create-no-rights p {
    max-width: 560px;

    margin: auto;

    color: #a3a3a3;

    font-size: 13px;
    line-height: 1.7;
}

.hs-ad-create-no-rights-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;

    margin-top: 32px;
}

.hs-ad-create-no-rights-action {
    min-height: 46px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    padding: 13px 20px;

    border-radius: 12px;

    font-weight: 600;
    text-decoration: none;

    transition:
        background-color 0.18s ease,
        color 0.18s ease,
        border-color 0.18s ease,
        transform 0.18s ease;
}

.hs-ad-create-no-rights-action:hover {
    transform: translateY(-1px);
}

.hs-ad-create-no-rights-action.is-primary {
    border: 1px solid #dc2626;

    background: #dc2626;
    color: #ffffff;
}

.hs-ad-create-no-rights-action.is-primary:hover {
    border-color: #b91c1c;

    background: #b91c1c;
}

.hs-ad-create-no-rights-action.is-secondary {
    border: 1px solid rgba(255, 255, 255, 0.09);

    background: #262626;
    color: #f5f5f5;
}

.hs-ad-create-no-rights-action.is-secondary:hover {
    border-color: rgba(255, 255, 255, 0.16);

    background: #333333;
}

/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 640px) {
    .hs-ad-create-card {
        padding: 18px;
    }

    .hs-ad-create-business {
        align-items: flex-start;
    }

    .hs-ad-create-business-image {
        width: 76px;
        height: 76px;

        border-radius: 15px;
    }

    .hs-ad-create-business-info h2 {
        font-size: 18px;
    }

    .hs-ad-create-right-box {
        display: grid;
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .hs-ad-create-right-item {
        min-width: 0;
    }

    .hs-ad-create-actions {
        flex-direction: column;
    }

    .hs-ad-create-btn {
        width: 100%;
    }

    .hs-ad-create-no-rights {
        padding: 34px 19px;
    }

    .hs-ad-create-no-rights-actions {
        flex-direction: column;
    }

    .hs-ad-create-no-rights-action {
        width: 100%;
    }
}

@media (max-width: 420px) {
    .hs-ad-create-business {
        flex-direction: column;
    }

    .hs-ad-create-right-box {
        grid-template-columns: 1fr;
    }

    .hs-ad-create-no-rights-icon {
        width: 70px;
        height: 70px;

        font-size: 28px;
    }

    .hs-ad-create-no-rights h2 {
        font-size: 20px;
    }
}

/* =========================================================
   REKLAM EKLE SAYFASI — KOYU TEMA
   ========================================================= */

.hs-ad-create-page {
    width: min(80%, 1120px);
    min-width: 0;

    margin: 0 auto;
    padding: 4px 0 120px;
}

/* =========================================================
   REKLAM HAKKI YOK
   ========================================================= */

.hs-ad-create-no-rights {
    position: relative;

    width: 100%;

    margin-top: 22px;
    padding: 46px 30px;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 26px;

    background:
        linear-gradient(
            145deg,
            #080808 0%,
            #180d0d 100%
        );

    text-align: center;

    box-shadow:
        0 18px 44px rgba(0, 0, 0, 0.5);
}

.hs-ad-create-no-rights-decoration {
    position: absolute;
    top: -130px;
    right: -100px;

    width: 320px;
    height: 320px;

    border-radius: 50%;

    background: rgba(220, 38, 38, 0.08);

    pointer-events: none;
}

.hs-ad-create-no-rights-icon {
    position: relative;
    z-index: 1;

    width: 82px;
    height: 82px;

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

    margin: 0 auto;

    border: 1px solid rgba(248, 113, 113, 0.17);
    border-radius: 24px;

    background: rgba(220, 38, 38, 0.13);
    color: #f87171;

    font-size: 32px;

    box-shadow:
        0 16px 32px rgba(220, 38, 38, 0.11);

    transform: rotate(-3deg);
}

.hs-ad-create-no-rights h2 {
    position: relative;
    z-index: 1;

    max-width: 680px;

    margin: 23px auto 0;

    color: #f5f5f5;

    font-size: clamp(22px, 3vw, 29px);
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: -0.025em;
}

.hs-ad-create-no-rights > p {
    position: relative;
    z-index: 1;

    max-width: 670px;

    margin: 13px auto 0;

    color: #a3a3a3;

    font-size: 12.5px;
    line-height: 1.7;
    font-weight: 500;
}

.hs-ad-create-no-rights-message {
    position: relative;
    z-index: 1;

    max-width: 680px;

    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 9px;

    margin: 20px auto 0;
    padding: 12px 15px;

    border: 1px solid rgba(250, 204, 21, 0.25);
    border-radius: 14px;

    background: rgba(161, 98, 7, 0.15);
    color: #fde68a;

    text-align: left;
}

.hs-ad-create-no-rights-message i {
    flex: 0 0 auto;

    margin-top: 2px;

    font-size: 12px;
}

.hs-ad-create-no-rights-message span {
    font-size: 10px;
    line-height: 1.5;
    font-weight: 600;
}

.hs-ad-create-no-rights-actions {
    position: relative;
    z-index: 1;

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;

    margin-top: 28px;
}

.hs-ad-create-no-rights-action {
    min-height: 47px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    padding: 11px 18px;

    border-radius: 14px;

    font-size: 10.5px;
    line-height: 1;
    font-weight: 700;
    text-decoration: none;

    transition:
        transform 0.18s ease,
        background-color 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}

.hs-ad-create-no-rights-action:hover {
    transform: translateY(-1px);
}

.hs-ad-create-no-rights-action.is-primary {
    border: 1px solid #dc2626;

    background: #dc2626;
    color: #ffffff;

    box-shadow:
        0 10px 22px rgba(220, 38, 38, 0.22);
}

.hs-ad-create-no-rights-action.is-primary:hover {
    border-color: #ef4444;

    background: #ef4444;

    box-shadow:
        0 13px 27px rgba(220, 38, 38, 0.28);
}

.hs-ad-create-no-rights-action.is-secondary {
    border: 1px solid rgba(255, 255, 255, 0.09);

    background: #171717;
    color: #e5e5e5;

    box-shadow:
        0 9px 20px rgba(0, 0, 0, 0.28);
}

.hs-ad-create-no-rights-action.is-secondary:hover {
    border-color: rgba(255, 255, 255, 0.17);

    background: #222222;
}

/* =========================================================
   REKLAM HAKKI ÖZETİ
   ========================================================= */

.hs-ad-create-rights {
    width: 100%;

    display: grid;
    grid-template-columns:
        minmax(0, 1.4fr)
        minmax(320px, 0.8fr);
    align-items: stretch;
    gap: 15px;

    margin-top: 22px;
}

.hs-ad-create-rights-main {
    min-width: 0;

    display: flex;
    align-items: center;
    gap: 16px;

    padding: 21px;

    border: 1px solid rgba(74, 222, 128, 0.15);
    border-radius: 21px;

    background:
        linear-gradient(
            135deg,
            #0d1a12 0%,
            #080808 100%
        );

    box-shadow:
        0 14px 32px rgba(0, 0, 0, 0.38);
}

.hs-ad-create-rights-icon {
    flex: 0 0 auto;

    width: 52px;
    height: 52px;

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

    border: 1px solid rgba(74, 222, 128, 0.17);
    border-radius: 17px;

    background: rgba(22, 163, 74, 0.15);
    color: #4ade80;

    font-size: 21px;
}

.hs-ad-create-rights-content {
    min-width: 0;

    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        auto;
    align-items: center;
    gap: 4px 14px;
}

.hs-ad-create-rights-content > span {
    color: #4ade80;

    font-size: 9px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.hs-ad-create-rights-content > strong {
    grid-column: 2;
    grid-row: 1 / 3;

    color: #86efac;

    font-size: 36px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: -0.04em;
}

.hs-ad-create-rights-content > small {
    color: #8f8f8f;

    font-size: 10px;
    line-height: 1.5;
    font-weight: 550;
}

.hs-ad-create-rights-details {
    min-width: 0;

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

    padding: 12px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 21px;

    background: #080808;

    box-shadow:
        0 14px 32px rgba(0, 0, 0, 0.38);
}

.hs-ad-create-rights-detail {
    min-width: 0;

    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 7px;

    padding: 13px;

    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 15px;

    background: #111111;
}

.hs-ad-create-rights-detail span {
    color: #737373;

    font-size: 8px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.hs-ad-create-rights-detail strong {
    overflow: hidden;

    color: #d4d4d4;

    font-size: 11px;
    line-height: 1.4;
    font-weight: 700;

    text-overflow: ellipsis;
}

/* =========================================================
   İŞLETME BİLGİLERİ
   ========================================================= */

.hs-ad-create-business {
    position: relative;

    width: 100%;
    min-width: 0;

    display: grid;
    grid-template-columns:
        auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 17px;

    margin-top: 17px;
    padding: 18px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 21px;

    background: #080808;

    box-shadow:
        0 14px 32px rgba(0, 0, 0, 0.38);
}

.hs-ad-create-business-image {
    flex: 0 0 auto;

    width: 82px;
    height: 82px;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;

    background: #171717;
}

.hs-ad-create-business-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}

.hs-ad-create-business-image-fallback {
    width: 100%;
    height: 100%;

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

    background:
        linear-gradient(
            135deg,
            #171717 0%,
            #262626 100%
        );

    color: #8f8f8f;

    font-size: 27px;
}

.hs-ad-create-business-image-fallback[hidden] {
    display: none !important;
}

.hs-ad-create-business-content {
    min-width: 0;
}

.hs-ad-create-business-label {
    display: block;

    margin-bottom: 6px;

    color: #60a5fa;

    font-size: 8.5px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.hs-ad-create-business-content h2 {
    overflow: hidden;

    margin: 0;

    color: #f5f5f5;

    font-size: 18px;
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: -0.015em;

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

.hs-ad-create-business-content p {
    min-width: 0;

    display: flex;
    align-items: center;
    gap: 7px;

    margin: 7px 0 0;

    color: #8f8f8f;

    font-size: 9.5px;
    line-height: 1.4;
    font-weight: 550;
}

.hs-ad-create-business-content p i {
    flex: 0 0 auto;

    color: #8f8f8f;
}

.hs-ad-create-business-content p span {
    overflow: hidden;

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

.hs-ad-create-business-category {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    margin-top: 9px;
    padding: 6px 9px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;

    background: #111111;
    color: #b8b8b8;

    font-size: 8px;
    line-height: 1;
    font-weight: 600;
}

.hs-ad-create-business-locked {
    flex: 0 0 auto;

    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 8px 10px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 11px;

    background: #111111;
    color: #8f8f8f;

    font-size: 8px;
    line-height: 1;
    font-weight: 600;
    white-space: nowrap;
}

/* =========================================================
   REKLAM FORMU
   ========================================================= */

.hs-ad-create-form {
    width: 100%;

    margin-top: 17px;
}

.hs-ad-create-form-section {
    width: 100%;

    padding: 22px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 22px;

    background: #080808;

    box-shadow:
        0 14px 34px rgba(0, 0, 0, 0.4);
}

.hs-ad-create-form-section
+ .hs-ad-create-form-section {
    margin-top: 17px;
}

.hs-ad-create-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 20px;
    padding-bottom: 18px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.hs-ad-create-section-header > div {
    min-width: 0;
}

.hs-ad-create-section-header > div > span {
    display: block;

    margin-bottom: 6px;

    color: #60a5fa;

    font-size: 8.5px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.hs-ad-create-section-header h2 {
    margin: 0;

    color: #f5f5f5;

    font-size: 18px;
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: -0.015em;
}

.hs-ad-create-section-header p {
    max-width: 650px;

    margin: 7px 0 0;

    color: #8f8f8f;

    font-size: 10px;
    line-height: 1.55;
    font-weight: 500;
}

.hs-ad-create-section-icon {
    flex: 0 0 auto;

    width: 49px;
    height: 49px;

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

    border: 1px solid rgba(96, 165, 250, 0.17);
    border-radius: 16px;

    background: rgba(37, 99, 235, 0.15);
    color: #60a5fa;

    font-size: 19px;
}

/* =========================================================
   AÇIKLAMA
   ========================================================= */

.hs-ad-create-description-field {
    width: 100%;
}

.hs-ad-create-description-field > label {
    display: block;

    margin-bottom: 8px;

    color: #d4d4d4;

    font-size: 10px;
    line-height: 1;
    font-weight: 600;
}

.hs-ad-create-description-field textarea {
    width: 100%;
    min-height: 150px;

    display: block;

    padding: 14px 15px;

    resize: vertical;

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;

    outline: none;

    background: #111111;
    color: #f5f5f5;

    font: inherit;
    font-size: 11px;
    line-height: 1.65;
    font-weight: 500;

    color-scheme: dark;

    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background-color 0.18s ease;
}

.hs-ad-create-description-field textarea::placeholder {
    color: #737373;
}

.hs-ad-create-description-field textarea:hover {
    border-color: rgba(255, 255, 255, 0.18);
}

.hs-ad-create-description-field textarea:focus {
    border-color: #60a5fa;

    background: #151515;

    box-shadow:
        0 0 0 3px rgba(96, 165, 250, 0.12);
}

.hs-ad-create-description-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    margin-top: 8px;
    padding: 0 2px;
}

.hs-ad-create-description-footer span {
    color: #737373;

    font-size: 8.5px;
    line-height: 1.35;
    font-weight: 550;
}

.hs-ad-create-description-footer strong {
    flex: 0 0 auto;

    color: #8f8f8f;

    font-size: 8.5px;
    line-height: 1;
    font-weight: 600;
}

/* =========================================================
   FORM MESAJI
   ========================================================= */

.hs-ad-create-message {
    margin-top: 15px;
    padding: 13px 15px;

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

    font-size: 10px;
    line-height: 1.5;
    font-weight: 700;
}

.hs-ad-create-message[hidden] {
    display: none !important;
}

.hs-ad-create-message.is-error {
    border-color: rgba(248, 113, 113, 0.28);

    background: rgba(220, 38, 38, 0.13);
    color: #fca5a5;
}

.hs-ad-create-message.is-success {
    border-color: rgba(74, 222, 128, 0.25);

    background: rgba(22, 163, 74, 0.13);
    color: #86efac;
}

/* =========================================================
   FORM ALT ALANI
   ========================================================= */

.hs-ad-create-submit-area {
    width: 100%;

    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        auto;
    align-items: center;
    gap: 20px;

    margin-top: 17px;
    padding: 17px 19px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 19px;

    background: #080808;

    box-shadow:
        0 14px 34px rgba(0, 0, 0, 0.4);
}

.hs-ad-create-submit-info {
    min-width: 0;

    display: flex;
    align-items: flex-start;
    gap: 9px;

    color: #8f8f8f;
}

.hs-ad-create-submit-info i {
    flex: 0 0 auto;

    margin-top: 2px;

    color: #60a5fa;

    font-size: 12px;
}

.hs-ad-create-submit-info span {
    max-width: 680px;

    font-size: 9px;
    line-height: 1.5;
    font-weight: 550;
}

.hs-ad-create-submit {
    min-width: 210px;
    min-height: 48px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    padding: 11px 18px;

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

    background: #f5f5f5;
    color: #050505;

    font: inherit;
    font-size: 10.5px;
    line-height: 1;
    font-weight: 700;

    cursor: pointer;

    box-shadow:
        0 11px 25px rgba(0, 0, 0, 0.34);

    transition:
        transform 0.18s ease,
        background-color 0.18s ease,
        box-shadow 0.18s ease;
}

.hs-ad-create-submit:hover:not(:disabled) {
    transform: translateY(-1px);

    background: #ffffff;

    box-shadow:
        0 14px 30px rgba(0, 0, 0, 0.42);
}

.hs-ad-create-submit:disabled {
    opacity: 0.58;

    cursor: wait;
    transform: none;
}

.hs-ad-create-spinner {
    width: 18px;
    height: 18px;

    display: inline-block;

    border: 2px solid rgba(5, 5, 5, 0.22);
    border-top-color: #050505;
    border-radius: 50%;

    animation:
        hs-ad-create-spinner-animation
        0.7s linear infinite;
}

.hs-ad-create-spinner[hidden] {
    display: none !important;
}

@keyframes hs-ad-create-spinner-animation {
    to {
        transform: rotate(360deg);
    }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {
    .hs-ad-create-page {
        width: 90%;
    }
}

@media (max-width: 850px) {
    .hs-ad-create-rights {
        grid-template-columns: 1fr;
    }

    .hs-ad-create-submit-area {
        grid-template-columns: 1fr;
    }

    .hs-ad-create-submit {
        width: 100%;
    }
}

@media (max-width: 680px) {
    .hs-ad-create-page {
        width: calc(100% - 28px);
    }

    .hs-ad-create-no-rights {
        padding: 36px 20px;

        border-radius: 22px;
    }

    .hs-ad-create-no-rights-actions {
        flex-direction: column;
    }

    .hs-ad-create-no-rights-action {
        width: 100%;
    }

    .hs-ad-create-rights-main {
        padding: 17px;
    }

    .hs-ad-create-rights-details {
        grid-template-columns: 1fr;
    }

    .hs-ad-create-business {
        grid-template-columns:
            auto minmax(0, 1fr);
    }

    .hs-ad-create-business-locked {
        grid-column: 1 / -1;

        justify-content: center;
    }

    .hs-ad-create-form-section {
        padding: 18px;

        border-radius: 20px;
    }

    .hs-ad-create-section-icon {
        display: none;
    }
}

@media (max-width: 440px) {
    .hs-ad-create-page {
        width: calc(100% - 20px);

        padding-bottom: 90px;
    }

    .hs-ad-create-rights-content {
        grid-template-columns: 1fr;
    }

    .hs-ad-create-rights-content > strong {
        grid-column: auto;
        grid-row: auto;

        margin-top: 4px;
    }

    .hs-ad-create-business {
        grid-template-columns: 1fr;
    }

    .hs-ad-create-business-image {
        width: 100%;
        height: 180px;
    }

    .hs-ad-create-business-content h2 {
        white-space: normal;
    }

    .hs-ad-create-business-content p span {
        white-space: normal;
    }

    .hs-ad-create-description-footer {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }
}

/* =========================================================
   REKLAM MEDYA DÜZENLEYİCİ — KOYU TEMA
   ========================================================= */

.reklam-duzenleyici {
    position: relative;

    width: 100%;
    min-width: 0;
}

/* =========================================================
   HEADER
   ========================================================= */

.reklam-duzenleyici-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    margin-bottom: 17px;
}

.reklam-duzenleyici-baslik {
    min-width: 0;

    display: flex;
    align-items: center;
    gap: 11px;
}

.reklam-duzenleyici-baslik-ikon {
    flex: 0 0 auto;

    width: 42px;
    height: 42px;

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

    border: 1px solid rgba(96, 165, 250, 0.16);
    border-radius: 14px;

    background: rgba(37, 99, 235, 0.14);
    color: #60a5fa;

    font-size: 16px;
}

.reklam-duzenleyici-baslik-metin {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 3px;
}

.reklam-duzenleyici-baslik-metin strong {
    color: #f5f5f5;

    font-size: 14px;
    line-height: 1.3;
    font-weight: 700;
}

.reklam-duzenleyici-baslik-metin small {
    color: #737373;

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

.reklam-duzenleyici-sayac {
    flex: 0 0 auto;

    min-width: 48px;
    min-height: 29px;

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

    padding: 6px 10px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;

    background: #111111;
    color: #a3a3a3;

    font-size: 9px;
    line-height: 1;
    font-weight: 700;
}

/* =========================================================
   YATAY MEDYA ALANI
   ========================================================= */

.reklam-duzenleyici-kaydirma {
    width: 100%;

    display: flex;
    align-items: stretch;
    gap: 13px;

    overflow-x: auto;
    overflow-y: hidden;

    padding: 3px 3px 13px;

    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color:
        #404040
        transparent;
}

.reklam-duzenleyici-kaydirma::-webkit-scrollbar {
    height: 7px;
}

.reklam-duzenleyici-kaydirma::-webkit-scrollbar-track {
    background: transparent;
}

.reklam-duzenleyici-kaydirma::-webkit-scrollbar-thumb {
    border-radius: 999px;

    background: #404040;
}

.reklam-duzenleyici-listesi {
    display: contents;
}

/* =========================================================
   MEDYA KARTI
   ========================================================= */

.reklam-duzenleyici-karti {
    position: relative;

    flex: 0 0 210px;

    min-width: 210px;
    padding: 8px;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 19px;

    background: #080808;

    box-shadow:
        0 12px 29px rgba(0, 0, 0, 0.38);

    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}

.reklam-duzenleyici-karti:hover {
    transform: translateY(-2px);

    border-color: rgba(96, 165, 250, 0.22);

    box-shadow:
        0 18px 38px rgba(0, 0, 0, 0.5);
}

.reklam-duzenleyici-karti.is-new {
    border-color: rgba(74, 222, 128, 0.2);
}

.reklam-duzenleyici-onizleme {
    position: relative;

    width: 100%;
    height: 190px;

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

    overflow: hidden;

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            #171717 0%,
            #242424 100%
        );

    cursor: pointer;
}

.reklam-duzenleyici-onizleme img,
.reklam-duzenleyici-onizleme video {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}

.reklam-duzenleyici-onizleme video {
    background: #000000;
}

.reklam-duzenleyici-video-oynat {
    position: absolute;
    top: 50%;
    left: 50%;

    width: 48px;
    height: 48px;

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

    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 50%;

    background: rgba(0, 0, 0, 0.7);
    color: #ffffff;

    font-size: 15px;

    box-shadow:
        0 9px 24px rgba(0, 0, 0, 0.45);

    pointer-events: none;

    transform: translate(-50%, -50%);
    backdrop-filter: blur(6px);
}

.reklam-duzenleyici-video-oynat i {
    margin-left: 2px;
}

.reklam-duzenleyici-video-oynat[hidden] {
    display: none !important;
}

.reklam-duzenleyici-medya-hata {
    width: 100%;
    height: 100%;

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

    color: #737373;
}

.reklam-duzenleyici-medya-hata[hidden] {
    display: none !important;
}

.reklam-duzenleyici-medya-hata i {
    font-size: 25px;
}

.reklam-duzenleyici-medya-hata small {
    font-size: 9px;
    font-weight: 600;
}

/* =========================================================
   KART ETİKETLERİ
   ========================================================= */

.reklam-duzenleyici-tip {
    position: absolute;
    top: 15px;
    left: 15px;

    display: inline-flex;
    align-items: center;
    gap: 5px;

    min-height: 25px;
    padding: 5px 8px;

    border: 1px solid rgba(255, 255, 255, 0.27);
    border-radius: 999px;

    color: #ffffff;

    font-size: 8px;
    line-height: 1;
    font-weight: 700;

    box-shadow:
        0 7px 18px rgba(0, 0, 0, 0.33);

    backdrop-filter: blur(7px);
}

.reklam-duzenleyici-tip.is-image {
    background: rgba(37, 99, 235, 0.82);
}

.reklam-duzenleyici-tip.is-video {
    background: rgba(124, 58, 237, 0.84);
}

.reklam-duzenleyici-yeni {
    position: absolute;
    top: 46px;
    left: 15px;

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

    min-height: 23px;
    padding: 5px 8px;

    border: 1px solid rgba(255, 255, 255, 0.26);
    border-radius: 999px;

    background: rgba(22, 163, 74, 0.84);
    color: #ffffff;

    font-size: 7.5px;
    line-height: 1;
    font-weight: 700;

    box-shadow:
        0 7px 18px rgba(0, 0, 0, 0.3);

    backdrop-filter: blur(7px);
}

.reklam-duzenleyici-sil {
    position: absolute;
    top: 14px;
    right: 14px;

    width: 31px;
    height: 31px;

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

    padding: 0;

    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 10px;

    background: rgba(0, 0, 0, 0.68);
    color: #ffffff;

    font-size: 11px;

    cursor: pointer;

    box-shadow:
        0 7px 18px rgba(0, 0, 0, 0.35);

    transition:
        background-color 0.18s ease,
        transform 0.18s ease;

    backdrop-filter: blur(7px);
}

.reklam-duzenleyici-sil:hover {
    transform: scale(1.04);

    background: rgba(220, 38, 38, 0.92);
}

/* =========================================================
   KART ALT ALANI
   ========================================================= */

.reklam-duzenleyici-kart-alt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    padding: 10px 3px 2px;
}

.reklam-duzenleyici-dosya-bilgisi {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 2px;
}

.reklam-duzenleyici-dosya-bilgisi strong {
    overflow: hidden;

    color: #d4d4d4;

    font-size: 9px;
    line-height: 1.3;
    font-weight: 600;

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

.reklam-duzenleyici-dosya-bilgisi small {
    color: #737373;

    font-size: 7.5px;
    line-height: 1.2;
    font-weight: 600;
}

.reklam-duzenleyici-siralama {
    flex: 0 0 auto;

    display: inline-flex;
    align-items: center;
    gap: 4px;

    padding: 3px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;

    background: #111111;
}

.reklam-duzenleyici-siralama button {
    width: 26px;
    height: 26px;

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

    padding: 0;

    border: 0;
    border-radius: 7px;

    background: transparent;
    color: #8f8f8f;

    font-size: 8px;

    cursor: pointer;

    transition:
        background-color 0.18s ease,
        color 0.18s ease;
}

.reklam-duzenleyici-siralama button:hover:not(:disabled) {
    background: #262626;
    color: #f5f5f5;
}

.reklam-duzenleyici-siralama button:disabled {
    opacity: 0.25;

    cursor: not-allowed;
}

.reklam-duzenleyici-siralama > span {
    min-width: 20px;

    color: #a3a3a3;

    font-size: 8px;
    line-height: 1;
    font-weight: 700;
    text-align: center;
}

/* =========================================================
   EKLEME KARTI
   ========================================================= */

.reklam-duzenleyici-ekle-karti {
    flex: 0 0 178px;

    min-width: 178px;
    min-height: 246px;

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

    padding: 18px;

    border: 1px dashed #404040;
    border-radius: 19px;

    background:
        linear-gradient(
            145deg,
            #0d0d0d 0%,
            #080808 100%
        );

    color: #8f8f8f;

    cursor: pointer;

    transition:
        border-color 0.18s ease,
        background-color 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease;
}

.reklam-duzenleyici-ekle-karti:hover {
    transform: translateY(-2px);

    border-color: #60a5fa;

    background: #101721;
    color: #60a5fa;
}

.reklam-duzenleyici-ekle-karti[hidden] {
    display: none !important;
}

.reklam-duzenleyici-ekle-ikon {
    width: 48px;
    height: 48px;

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

    border: 1px solid rgba(96, 165, 250, 0.16);
    border-radius: 16px;

    background: rgba(37, 99, 235, 0.14);
    color: #60a5fa;

    font-size: 18px;
}

.reklam-duzenleyici-ekle-karti strong {
    font-size: 10px;
    line-height: 1.3;
    font-weight: 700;
}

.reklam-duzenleyici-ekle-karti small {
    color: #737373;

    font-size: 8px;
    line-height: 1.3;
    font-weight: 550;
}

/* =========================================================
   BİLGİ NOTU
   ========================================================= */

.reklam-duzenleyici-bilgi {
    display: flex;
    align-items: flex-start;
    gap: 8px;

    margin-top: 5px;
    padding: 11px 13px;

    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 13px;

    background: #0d0d0d;
    color: #8f8f8f;
}

.reklam-duzenleyici-bilgi i {
    flex: 0 0 auto;

    margin-top: 2px;

    color: #60a5fa;

    font-size: 11px;
}

.reklam-duzenleyici-bilgi p {
    margin: 0;

    font-size: 8.5px;
    line-height: 1.5;
    font-weight: 550;
}

/* =========================================================
   BOTTOM SHEET
   ========================================================= */

body.reklam-duzenleyici-modal-acik {
    overflow: hidden;
}

.reklam-duzenleyici-sheet {
    position: fixed;
    inset: 0;
    z-index: 9997;

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

    padding: 20px;

    visibility: hidden;
    opacity: 0;

    background: rgba(0, 0, 0, 0.7);

    transition:
        opacity 0.2s ease,
        visibility 0.2s ease;

    backdrop-filter: blur(5px);
}

.reklam-duzenleyici-sheet.acik {
    visibility: visible;
    opacity: 1;
}

.reklam-duzenleyici-sheet-dialog {
    width: min(100%, 500px);

    padding: 12px 20px 22px;

    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 25px;

    background: #080808;

    box-shadow:
        0 28px 70px rgba(0, 0, 0, 0.68);

    transform: translateY(30px);

    transition:
        transform 0.22s ease;
}

.reklam-duzenleyici-sheet.acik
.reklam-duzenleyici-sheet-dialog {
    transform: translateY(0);
}

.reklam-duzenleyici-sheet-tutamac {
    width: 42px;
    height: 4px;

    margin: 0 auto 15px;

    border-radius: 999px;

    background: #404040;
}

.reklam-duzenleyici-sheet-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;

    margin-bottom: 16px;
}

.reklam-duzenleyici-sheet-header > div {
    min-width: 0;
}

.reklam-duzenleyici-sheet-header h2 {
    margin: 0;

    color: #f5f5f5;

    font-size: 18px;
    line-height: 1.3;
    font-weight: 700;
}

.reklam-duzenleyici-sheet-header p {
    margin: 5px 0 0;

    color: #8f8f8f;

    font-size: 9.5px;
    line-height: 1.5;
    font-weight: 500;
}

.reklam-duzenleyici-sheet-kapat {
    flex: 0 0 auto;

    width: 35px;
    height: 35px;

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

    padding: 0;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 11px;

    background: #111111;
    color: #8f8f8f;

    cursor: pointer;

    transition:
        background-color 0.18s ease,
        color 0.18s ease;
}

.reklam-duzenleyici-sheet-kapat:hover {
    background: #1d1d1d;
    color: #f5f5f5;
}

.reklam-duzenleyici-secenek {
    width: 100%;

    display: grid;
    grid-template-columns:
        auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;

    padding: 14px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;

    background: #0d0d0d;
    color: #d4d4d4;

    text-align: left;

    cursor: pointer;

    transition:
        border-color 0.18s ease,
        background-color 0.18s ease,
        transform 0.18s ease;
}

.reklam-duzenleyici-secenek
+ .reklam-duzenleyici-secenek {
    margin-top: 10px;
}

.reklam-duzenleyici-secenek:hover {
    transform: translateY(-1px);

    border-color: rgba(96, 165, 250, 0.22);

    background: #111721;
}

.reklam-duzenleyici-secenek-ikon {
    width: 43px;
    height: 43px;

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

    border-radius: 14px;

    font-size: 16px;
}

.reklam-duzenleyici-secenek-ikon.is-gallery {
    background: rgba(37, 99, 235, 0.14);
    color: #60a5fa;
}

.reklam-duzenleyici-secenek-ikon.is-camera {
    background: rgba(124, 58, 237, 0.15);
    color: #a78bfa;
}

.reklam-duzenleyici-secenek-metin {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 3px;
}

.reklam-duzenleyici-secenek-metin strong {
    color: #e5e5e5;

    font-size: 10.5px;
    line-height: 1.3;
    font-weight: 600;
}

.reklam-duzenleyici-secenek-metin small {
    color: #737373;

    font-size: 8px;
    line-height: 1.4;
    font-weight: 550;
}

.reklam-duzenleyici-secenek > i {
    color: #737373;

    font-size: 10px;
}

/* =========================================================
   TOAST
   ========================================================= */

.reklam-duzenleyici-toast-alani {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 10010;

    width: min(340px, calc(100% - 28px));

    display: flex;
    flex-direction: column;
    gap: 9px;

    pointer-events: none;
}

.reklam-duzenleyici-toast {
    display: flex;
    align-items: flex-start;
    gap: 9px;

    padding: 12px 14px;

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

    opacity: 0;

    font-size: 9px;
    line-height: 1.45;
    font-weight: 600;

    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.48);

    transform: translateY(12px);

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}

.reklam-duzenleyici-toast.goster {
    opacity: 1;

    transform: translateY(0);
}

.reklam-duzenleyici-toast.success {
    border-color: rgba(74, 222, 128, 0.25);

    background: #0d1a12;
    color: #86efac;
}

.reklam-duzenleyici-toast.warning {
    border-color: rgba(250, 204, 21, 0.24);

    background: #1a1508;
    color: #fde68a;
}

.reklam-duzenleyici-toast.error {
    border-color: rgba(248, 113, 113, 0.27);

    background: #1b0c0c;
    color: #fca5a5;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 640px) {
    .reklam-duzenleyici-karti {
        flex-basis: 178px;

        min-width: 178px;
    }

    .reklam-duzenleyici-onizleme {
        height: 165px;
    }

    .reklam-duzenleyici-ekle-karti {
        flex-basis: 155px;

        min-width: 155px;
        min-height: 221px;
    }

    .reklam-duzenleyici-sheet {
        padding: 10px;
    }

    .reklam-duzenleyici-sheet-dialog {
        padding: 10px 16px 18px;

        border-radius: 22px;
    }

    .reklam-duzenleyici-toast-alani {
        right: 14px;
        bottom: 14px;
    }
}

/* =========================================================
   REKLAM İÇERİK DÜZENLEME — KOYU TEMA
   ========================================================= */

.hs-ad-edit-page {
    width: min(80%, 1160px);

    margin: 0 auto;
    padding: 4px 0 120px;
}

/* =========================================================
   HERO
   ========================================================= */

.hs-ad-edit-hero {
    position: relative;

    width: 100%;

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

    padding: 30px;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 27px;

    background:
        linear-gradient(
            135deg,
            #050505 0%,
            #17100a 100%
        );

    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.5);
}

.hs-ad-edit-hero::before {
    content: "";

    position: absolute;
    top: -130px;
    right: -80px;

    width: 310px;
    height: 310px;

    border-radius: 50%;

    background:
        rgba(249, 115, 22, 0.09);
}

.hs-ad-edit-hero-content {
    position: relative;
    z-index: 1;

    min-width: 0;
    max-width: 700px;
}

.hs-ad-edit-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    margin-bottom: 12px;
    padding: 7px 11px;

    border: 1px solid rgba(251, 146, 60, 0.2);
    border-radius: 999px;

    background: rgba(249, 115, 22, 0.11);
    color: #fb923c;

    font-size: 10px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.hs-ad-edit-hero h1 {
    margin: 0;

    color: #f5f5f5;

    font-size: clamp(27px, 4vw, 39px);
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -0.035em;
}

.hs-ad-edit-hero p {
    max-width: 650px;

    margin: 14px 0 0;

    color: #a3a3a3;

    font-size: 13px;
    line-height: 1.7;
    font-weight: 500;
}

.hs-ad-edit-hero-actions {
    position: relative;
    z-index: 1;

    flex: 0 0 auto;
}

.hs-ad-edit-back {
    min-height: 43px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 10px 15px;

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 13px;

    background: rgba(255, 255, 255, 0.055);
    color: #d4d4d4;

    font-size: 9.5px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;

    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.25);

    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        background-color 0.18s ease;
}

.hs-ad-edit-back:hover {
    transform: translateY(-1px);

    border-color: rgba(251, 146, 60, 0.22);

    background: rgba(255, 255, 255, 0.08);
}

/* =========================================================
   DURUM
   ========================================================= */

.hs-ad-edit-status-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;

    margin-top: 20px;
    padding: 18px 20px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;

    background: #080808;

    box-shadow:
        0 14px 32px rgba(0, 0, 0, 0.4);
}

.hs-ad-edit-status-main {
    min-width: 0;

    display: flex;
    align-items: center;
    gap: 14px;
}

.hs-ad-edit-status-icon {
    flex: 0 0 auto;

    width: 48px;
    height: 48px;

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

    border-radius: 15px;

    font-size: 18px;
}

.hs-ad-edit-status-icon.is-active {
    border: 1px solid rgba(74, 222, 128, 0.16);

    background: rgba(22, 163, 74, 0.12);
    color: #4ade80;
}

.hs-ad-edit-status-icon.is-passive {
    border: 1px solid rgba(163, 163, 163, 0.14);

    background: #111111;
    color: #8f8f8f;
}

.hs-ad-edit-status-content {
    min-width: 0;
}

.hs-ad-edit-status-content small {
    display: block;

    margin-bottom: 3px;

    color: #737373;

    font-size: 8px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.hs-ad-edit-status-content strong {
    display: block;

    color: #f5f5f5;

    font-size: 15px;
    line-height: 1.3;
    font-weight: 700;
}

.hs-ad-edit-status-content p {
    margin: 4px 0 0;

    color: #8f8f8f;

    font-size: 9px;
    line-height: 1.45;
    font-weight: 500;
}

.hs-ad-edit-status-meta {
    flex: 0 0 auto;

    min-width: 95px;

    display: flex;
    align-items: flex-end;
    flex-direction: column;
    gap: 3px;
}

.hs-ad-edit-status-meta span {
    color: #737373;

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

.hs-ad-edit-status-meta strong {
    color: #d4d4d4;

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

/* =========================================================
   FORM VE KARTLAR
   ========================================================= */

.hs-ad-edit-form {
    display: flex;
    flex-direction: column;
    gap: 18px;

    margin-top: 20px;
}

.hs-ad-edit-card {
    min-width: 0;

    padding: 22px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 22px;

    background: #080808;

    box-shadow:
        0 15px 34px rgba(0, 0, 0, 0.4);
}

.hs-ad-edit-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 19px;
    padding-bottom: 17px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.hs-ad-edit-card-header > div {
    min-width: 0;
}

.hs-ad-edit-card-header > div > span {
    display: block;

    margin-bottom: 6px;

    color: #fb923c;

    font-size: 8px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.hs-ad-edit-card-header h2 {
    margin: 0;

    color: #f5f5f5;

    font-size: 17px;
    line-height: 1.35;
    font-weight: 700;
    letter-spacing: -0.015em;
}

.hs-ad-edit-card-header p {
    max-width: 650px;

    margin: 5px 0 0;

    color: #8f8f8f;

    font-size: 9.5px;
    line-height: 1.5;
    font-weight: 500;
}

.hs-ad-edit-card-header-icon {
    flex: 0 0 auto;

    width: 45px;
    height: 45px;

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

    border: 1px solid rgba(251, 146, 60, 0.17);
    border-radius: 14px;

    background: rgba(249, 115, 22, 0.11);
    color: #fb923c;

    font-size: 17px;
}

.hs-ad-edit-card-header-icon.is-media {
    border-color: rgba(96, 165, 250, 0.17);

    background: rgba(37, 99, 235, 0.13);
    color: #60a5fa;
}

.hs-ad-edit-card-header-icon.is-description {
    border-color: rgba(167, 139, 250, 0.17);

    background: rgba(124, 58, 237, 0.14);
    color: #a78bfa;
}

/* =========================================================
   İŞLETME
   ========================================================= */

.hs-ad-edit-business {
    display: grid;
    grid-template-columns:
        auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 17px;
}

.hs-ad-edit-business-image {
    width: 82px;
    height: 82px;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;

    background: #111111;
}

.hs-ad-edit-business-image img,
.hs-ad-edit-business-fallback {
    width: 100%;
    height: 100%;
}

.hs-ad-edit-business-image img {
    display: block;

    object-fit: cover;
}

.hs-ad-edit-business-fallback {
    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(249, 115, 22, 0.11);
    color: #fb923c;

    font-size: 24px;
}

.hs-ad-edit-business-fallback[hidden] {
    display: none !important;
}

.hs-ad-edit-business-content {
    min-width: 0;
}

.hs-ad-edit-business-label {
    display: block;

    margin-bottom: 4px;

    color: #737373;

    font-size: 8px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.hs-ad-edit-business-content h3 {
    overflow: hidden;

    margin: 0;

    color: #f5f5f5;

    font-size: 17px;
    line-height: 1.35;
    font-weight: 700;

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

.hs-ad-edit-business-content p {
    min-width: 0;

    display: flex;
    align-items: center;
    gap: 6px;

    margin: 6px 0 0;

    color: #8f8f8f;

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

.hs-ad-edit-business-content p span {
    overflow: hidden;

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

.hs-ad-edit-business-content p i {
    flex: 0 0 auto;

    color: #fb923c;
}

.hs-ad-edit-business-category {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    margin-top: 8px;
    padding: 6px 8px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;

    background: #111111;
    color: #a3a3a3;

    font-size: 8px;
    font-weight: 600;
}

.hs-ad-edit-business-lock {
    flex: 0 0 auto;

    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 9px 11px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 11px;

    background: #111111;
    color: #8f8f8f;

    font-size: 8.5px;
    font-weight: 600;
    white-space: nowrap;
}

/* =========================================================
   AÇIKLAMA
   ========================================================= */

.hs-ad-edit-description-field label {
    display: block;

    margin-bottom: 8px;

    color: #d4d4d4;

    font-size: 10px;
    font-weight: 600;
}

.hs-ad-edit-description-field textarea {
    width: 100%;
    min-height: 155px;

    display: block;

    resize: vertical;

    padding: 14px 15px;

    outline: none;

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;

    background: #050505;
    color: #f5f5f5;

    font: inherit;
    font-size: 10.5px;
    line-height: 1.65;

    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}

.hs-ad-edit-description-field textarea:focus {
    border-color: #fb923c;

    box-shadow:
        0 0 0 3px rgba(249, 115, 22, 0.11);
}

.hs-ad-edit-description-field textarea::placeholder {
    color: #737373;
}

.hs-ad-edit-description-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    margin-top: 7px;
    padding: 0 2px;
}

.hs-ad-edit-description-footer span {
    color: #737373;

    font-size: 8px;
    font-weight: 550;
}

.hs-ad-edit-description-footer strong {
    color: #8f8f8f;

    font-size: 8px;
    font-weight: 600;
}

/* =========================================================
   MESAJ
   ========================================================= */

.hs-ad-edit-message {
    padding: 13px 15px;

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

    font-size: 9.5px;
    line-height: 1.5;
    font-weight: 600;
}

.hs-ad-edit-message[hidden] {
    display: none !important;
}

.hs-ad-edit-message.is-error {
    border-color: rgba(248, 113, 113, 0.27);

    background: #1b0c0c;
    color: #fca5a5;
}

.hs-ad-edit-message.is-success {
    border-color: rgba(74, 222, 128, 0.25);

    background: #0d1a12;
    color: #86efac;
}

.hs-ad-edit-message.is-warning {
    border-color: rgba(250, 204, 21, 0.24);

    background: #1a1508;
    color: #fde68a;
}

/* =========================================================
   SUBMIT
   ========================================================= */

.hs-ad-edit-submit-area {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;

    padding: 19px 21px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;

    background: #080808;

    box-shadow:
        0 14px 32px rgba(0, 0, 0, 0.38);
}

.hs-ad-edit-submit-info {
    min-width: 0;
    max-width: 610px;

    display: flex;
    align-items: flex-start;
    gap: 9px;

    color: #8f8f8f;
}

.hs-ad-edit-submit-info i {
    flex: 0 0 auto;

    margin-top: 2px;

    color: #60a5fa;

    font-size: 12px;
}

.hs-ad-edit-submit-info span {
    font-size: 8.8px;
    line-height: 1.5;
    font-weight: 550;
}

.hs-ad-edit-submit-actions {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    gap: 10px;
}

.hs-ad-edit-save-button,
.hs-ad-edit-delete-button {
    min-height: 43px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 10px 15px;

    border-radius: 13px;

    font-size: 9.5px;
    font-weight: 700;

    cursor: pointer;

    transition:
        transform 0.18s ease,
        background-color 0.18s ease,
        border-color 0.18s ease;
}

.hs-ad-edit-save-button {
    border: 1px solid #f97316;

    background: #f97316;
    color: #ffffff;

    box-shadow:
        0 10px 24px rgba(249, 115, 22, 0.2);
}

.hs-ad-edit-save-button:hover:not(:disabled) {
    transform: translateY(-1px);

    background: #ea580c;
}

.hs-ad-edit-delete-button {
    border: 1px solid rgba(248, 113, 113, 0.24);

    background: #1b0c0c;
    color: #f87171;
}

.hs-ad-edit-delete-button:hover:not(:disabled) {
    transform: translateY(-1px);

    border-color: rgba(248, 113, 113, 0.4);

    background: #250d0d;
}

.hs-ad-edit-save-button:disabled,
.hs-ad-edit-delete-button:disabled {
    opacity: 0.55;

    cursor: not-allowed;
}

/* =========================================================
   SPINNER
   ========================================================= */

.hs-ad-edit-spinner {
    width: 15px;
    height: 15px;

    display: inline-block;

    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;

    animation:
        hs-ad-edit-spin 0.75s linear infinite;
}

.hs-ad-edit-spinner[hidden] {
    display: none !important;
}

@keyframes hs-ad-edit-spin {
    to {
        transform: rotate(360deg);
    }
}

/* =========================================================
   SİLME MODALI
   ========================================================= */

body.hs-ad-edit-modal-open {
    overflow: hidden;
}

.hs-ad-edit-delete-modal {
    position: fixed;
    inset: 0;
    z-index: 10020;

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

    padding: 20px;

    visibility: hidden;
    opacity: 0;

    background: rgba(0, 0, 0, 0.74);

    transition:
        opacity 0.2s ease,
        visibility 0.2s ease;

    backdrop-filter: blur(5px);
}

.hs-ad-edit-delete-modal.is-open {
    visibility: visible;
    opacity: 1;
}

.hs-ad-edit-delete-dialog {
    position: relative;

    width: min(100%, 460px);

    padding: 28px;

    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 24px;

    background: #080808;

    box-shadow:
        0 30px 75px rgba(0, 0, 0, 0.7);

    text-align: center;

    transform: translateY(15px) scale(0.98);

    transition:
        transform 0.2s ease;
}

.hs-ad-edit-delete-modal.is-open
.hs-ad-edit-delete-dialog {
    transform: translateY(0) scale(1);
}

.hs-ad-edit-delete-close {
    position: absolute;
    top: 15px;
    right: 15px;

    width: 34px;
    height: 34px;

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

    padding: 0;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 11px;

    background: #111111;
    color: #8f8f8f;

    cursor: pointer;
}

.hs-ad-edit-delete-icon {
    width: 64px;
    height: 64px;

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

    margin: 0 auto 15px;

    border: 1px solid rgba(248, 113, 113, 0.24);
    border-radius: 20px;

    background: #1b0c0c;
    color: #f87171;

    font-size: 24px;
}

.hs-ad-edit-delete-label {
    display: inline-block;

    margin-bottom: 7px;

    color: #f87171;

    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.hs-ad-edit-delete-dialog h2 {
    margin: 0;

    color: #f5f5f5;

    font-size: 19px;
    line-height: 1.35;
    font-weight: 700;
}

.hs-ad-edit-delete-dialog > p {
    margin: 10px 0 0;

    color: #8f8f8f;

    font-size: 9.5px;
    line-height: 1.6;
}

.hs-ad-edit-delete-warning {
    display: flex;
    align-items: flex-start;
    gap: 8px;

    margin-top: 17px;
    padding: 12px 13px;

    border: 1px solid rgba(250, 204, 21, 0.22);
    border-radius: 13px;

    background: #1a1508;
    color: #fde68a;

    text-align: left;
}

.hs-ad-edit-delete-warning i {
    flex: 0 0 auto;

    margin-top: 2px;

    font-size: 11px;
}

.hs-ad-edit-delete-warning span {
    font-size: 8.5px;
    line-height: 1.5;
    font-weight: 600;
}

.hs-ad-edit-delete-actions {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 10px;

    margin-top: 20px;
}

.hs-ad-edit-delete-cancel,
.hs-ad-edit-delete-confirm {
    min-height: 43px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    padding: 10px 13px;

    border-radius: 12px;

    font-size: 9px;
    font-weight: 700;

    cursor: pointer;
}

.hs-ad-edit-delete-cancel {
    border: 1px solid rgba(255, 255, 255, 0.08);

    background: #111111;
    color: #d4d4d4;
}

.hs-ad-edit-delete-confirm {
    border: 1px solid #dc2626;

    background: #dc2626;
    color: #ffffff;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {
    .hs-ad-edit-page {
        width: 90%;
    }
}

@media (max-width: 760px) {
    .hs-ad-edit-page {
        width: 94%;

        padding-bottom: 90px;
    }

    .hs-ad-edit-hero {
        align-items: flex-start;
        flex-direction: column;

        padding: 24px;
    }

    .hs-ad-edit-back {
        width: 100%;
    }

    .hs-ad-edit-status-section {
        align-items: flex-start;
        flex-direction: column;
    }

    .hs-ad-edit-status-meta {
        align-items: flex-start;
    }

    .hs-ad-edit-business {
        grid-template-columns:
            auto minmax(0, 1fr);
    }

    .hs-ad-edit-business-lock {
        grid-column: 1 / -1;

        justify-content: center;

        width: 100%;
    }

    .hs-ad-edit-submit-area {
        align-items: stretch;
        flex-direction: column;
    }

    .hs-ad-edit-submit-actions {
        display: grid;
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .hs-ad-edit-save-button,
    .hs-ad-edit-delete-button {
        width: 100%;
    }
}

@media (max-width: 520px) {
    .hs-ad-edit-hero {
        padding: 20px;

        border-radius: 22px;
    }

    .hs-ad-edit-card {
        padding: 18px;

        border-radius: 19px;
    }

    .hs-ad-edit-card-header-icon {
        width: 40px;
        height: 40px;
    }

    .hs-ad-edit-business-image {
        width: 68px;
        height: 68px;

        border-radius: 15px;
    }

    .hs-ad-edit-submit-actions {
        grid-template-columns: 1fr;
    }

    .hs-ad-edit-delete-dialog {
        padding: 24px 18px;
    }

    .hs-ad-edit-delete-actions {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   İŞLETME REKLAM GEÇMİŞİ — KOYU TEMA
   ========================================================= */

.hs-ad-history-page {
    width: min(80%, 1180px);

    margin: 0 auto;
    padding: 4px 0 110px;
}

/* =========================================================
   HERO
   ========================================================= */

.hs-ad-history-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 26px;

    padding: 28px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 25px;

    background:
        linear-gradient(
            135deg,
            #050505 0%,
            #0d1118 100%
        );

    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.48);
}

.hs-ad-history-hero-content {
    min-width: 0;
}

.hs-ad-history-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    margin-bottom: 11px;
    padding: 7px 10px;

    border: 1px solid rgba(96, 165, 250, 0.17);
    border-radius: 999px;

    background: rgba(37, 99, 235, 0.14);
    color: #60a5fa;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.hs-ad-history-hero h1 {
    margin: 0;

    color: #f5f5f5;

    font-size: clamp(26px, 4vw, 37px);
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.035em;
}

.hs-ad-history-hero p {
    max-width: 690px;

    margin: 12px 0 0;

    color: #a3a3a3;

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

.hs-ad-history-back {
    flex: 0 0 auto;

    min-height: 42px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 10px 14px;

    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 13px;

    background: #111111;
    color: #d4d4d4;

    font-size: 9px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

/* =========================================================
   ÖZET
   ========================================================= */

.hs-ad-history-summary {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 13px;

    margin-top: 18px;
}

.hs-ad-history-summary-item {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 16px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 17px;

    background: #080808;

    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.37);
}

.hs-ad-history-summary-icon {
    flex: 0 0 auto;

    width: 42px;
    height: 42px;

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

    border-radius: 13px;

    background: #151515;
    color: #a3a3a3;

    font-size: 15px;
}

.hs-ad-history-summary-item.is-active
.hs-ad-history-summary-icon {
    background: rgba(22, 163, 74, 0.13);
    color: #4ade80;
}

.hs-ad-history-summary-item.is-passive
.hs-ad-history-summary-icon {
    background: rgba(234, 88, 12, 0.14);
    color: #fb923c;
}

.hs-ad-history-summary-item.is-right
.hs-ad-history-summary-icon {
    background: rgba(37, 99, 235, 0.14);
    color: #60a5fa;
}

.hs-ad-history-summary-content {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.hs-ad-history-summary-content small {
    color: #737373;

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

.hs-ad-history-summary-content strong {
    color: #f5f5f5;

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

/* =========================================================
   ACCORDION
   ========================================================= */

.hs-ad-history-accordion {
    margin-top: 18px;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 21px;

    background: #080808;

    box-shadow:
        0 15px 34px rgba(0, 0, 0, 0.4);
}

.hs-ad-history-accordion-trigger {
    width: 100%;

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

    padding: 19px 21px;

    border: 0;

    background: transparent;
    color: inherit;

    text-align: left;

    cursor: pointer;
}

.hs-ad-history-accordion-trigger-left {
    min-width: 0;

    display: flex;
    align-items: center;
    gap: 13px;
}

.hs-ad-history-accordion-icon {
    flex: 0 0 auto;

    width: 46px;
    height: 46px;

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

    border-radius: 15px;

    background: rgba(37, 99, 235, 0.14);
    color: #60a5fa;

    font-size: 17px;
}

.hs-ad-history-accordion-title {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 3px;
}

.hs-ad-history-accordion-title small {
    color: #60a5fa;

    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.hs-ad-history-accordion-title strong {
    color: #f5f5f5;

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

.hs-ad-history-accordion-title > span {
    color: #8f8f8f;

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

.hs-ad-history-accordion-arrow {
    flex: 0 0 auto;

    width: 33px;
    height: 33px;

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

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 11px;

    background: #111111;
    color: #8f8f8f;

    font-size: 10px;

    transition:
        transform 0.2s ease;
}

.hs-ad-history-accordion.is-open
.hs-ad-history-accordion-arrow {
    transform: rotate(180deg);
}

.hs-ad-history-accordion-content {
    display: none;

    padding: 0 21px 21px;
}

.hs-ad-history-accordion.is-open
.hs-ad-history-accordion-content {
    display: block;
}

/* =========================================================
   PAKETLER
   ========================================================= */

.hs-ad-history-package-list {
    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 15px;
}

.hs-ad-history-package-row {
    display: grid;
    grid-template-columns:
        minmax(190px, 1.4fr)
        repeat(4, minmax(110px, 1fr));
    align-items: center;
    gap: 16px;

    padding: 14px 16px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.hs-ad-history-package-row:last-child {
    border-bottom: 0;
}

.hs-ad-history-package-main {
    min-width: 0;

    display: flex;
    align-items: center;
    gap: 10px;
}

.hs-ad-history-package-row-icon {
    flex: 0 0 auto;

    width: 36px;
    height: 36px;

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

    border-radius: 11px;

    background: rgba(124, 58, 237, 0.15);
    color: #a78bfa;

    font-size: 13px;
}

.hs-ad-history-package-info {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hs-ad-history-package-info strong {
    overflow: hidden;

    color: #e5e5e5;

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

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

.hs-ad-history-package-info span {
    color: #8f8f8f;

    font-size: 8px;
}

.hs-ad-history-package-detail {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 3px;
}

.hs-ad-history-package-detail small {
    color: #737373;

    font-size: 7.5px;
    font-weight: 600;
}

.hs-ad-history-package-detail strong {
    overflow: hidden;

    color: #d4d4d4;

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

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

.hs-ad-history-package-total {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 34px;

    margin-top: 13px;
    padding: 15px 17px;

    border: 1px solid rgba(96, 165, 250, 0.17);
    border-radius: 14px;

    background: rgba(37, 99, 235, 0.09);
}

.hs-ad-history-package-total > div {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    gap: 3px;
}

.hs-ad-history-package-total small {
    color: #8f8f8f;

    font-size: 8px;
}

.hs-ad-history-package-total strong {
    color: #60a5fa;

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

/* =========================================================
   BÖLÜM BAŞLIĞI
   ========================================================= */

.hs-ad-history-content-section {
    margin-top: 20px;
}

.hs-ad-history-section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 15px;
}

.hs-ad-history-section-header > div > span {
    display: block;

    margin-bottom: 5px;

    color: #60a5fa;

    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.hs-ad-history-section-header h2 {
    margin: 0;

    color: #f5f5f5;

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

.hs-ad-history-section-header p {
    margin: 5px 0 0;

    color: #8f8f8f;

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

.hs-ad-history-add {
    min-height: 41px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    padding: 10px 14px;

    border-radius: 12px;

    background: #2563eb;
    color: #ffffff;

    font-size: 9px;
    font-weight: 600;
    text-decoration: none;
}

/* =========================================================
   İÇERİK KARTLARI EKLERİ
   ========================================================= */

.hs-ad-history-content-card {
    position: relative;

    cursor: pointer;
}

.hs-ad-history-status {
    position: absolute;
    top: 13px;
    left: 13px;
    z-index: 2;

    display: inline-flex;
    align-items: center;
    gap: 5px;

    padding: 6px 9px;

    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 999px;

    color: #ffffff;

    font-size: 8px;
    font-weight: 700;

    box-shadow:
        0 7px 18px rgba(0, 0, 0, 0.35);

    backdrop-filter: blur(6px);
}

.hs-ad-history-status.is-active {
    background: rgba(22, 163, 74, 0.86);
}

.hs-ad-history-status.is-passive {
    background: rgba(234, 88, 12, 0.86);
}

.hs-ad-history-status.is-reported {
    background: rgba(185, 28, 28, 0.9);
}

.hs-ad-history-content-dates {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 9px;

    margin-top: 13px;
}

.hs-ad-history-content-dates > div {
    min-width: 0;

    display: flex;
    align-items: flex-start;
    gap: 8px;

    padding: 10px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;

    background: #111111;
}

.hs-ad-history-content-dates > div > i {
    flex: 0 0 auto;

    margin-top: 2px;

    color: #60a5fa;

    font-size: 10px;
}

.hs-ad-history-content-dates > div:nth-child(2) > i {
    color: #fb923c;
}

.hs-ad-history-content-dates span {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 3px;
}

.hs-ad-history-content-dates small {
    color: #737373;

    font-size: 7.5px;
    font-weight: 600;
}

.hs-ad-history-content-dates strong {
    color: #a3a3a3;

    font-size: 8px;
    line-height: 1.35;
    font-weight: 600;
}

.hs-ad-history-content-action {
    margin-top: 12px;
}

.hs-ad-history-activate,
.hs-ad-history-plan-action {
    width: 100%;
    min-height: 40px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    padding: 9px 13px;

    border-radius: 12px;

    font-size: 9px;
    font-weight: 700;
    text-decoration: none;

    cursor: pointer;
}

.hs-ad-history-activate {
    border: 1px solid #16a34a;

    background: #16a34a;
    color: #ffffff;
}

.hs-ad-history-plan-action {
    border: 1px solid rgba(96, 165, 250, 0.2);

    background: rgba(37, 99, 235, 0.13);
    color: #60a5fa;
}

/* =========================================================
   BOŞ ALANLAR
   ========================================================= */

.hs-ad-history-package-empty,
.hs-ad-history-content-empty {
    padding: 40px 24px;

    text-align: center;
}

.hs-ad-history-package-empty > span,
.hs-ad-history-content-empty > span {
    width: 66px;
    height: 66px;

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

    margin: 0 auto 14px;

    border-radius: 20px;

    background: rgba(37, 99, 235, 0.14);
    color: #60a5fa;

    font-size: 25px;
}

.hs-ad-history-package-empty strong,
.hs-ad-history-content-empty strong {
    display: block;

    color: #f5f5f5;

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

.hs-ad-history-package-empty p,
.hs-ad-history-content-empty p {
    max-width: 490px;

    margin: 8px auto 17px;

    color: #8f8f8f;

    font-size: 9.5px;
    line-height: 1.6;
}

.hs-ad-history-package-empty a,
.hs-ad-history-content-empty a {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 10px 14px;

    border-radius: 12px;

    background: #2563eb;
    color: #ffffff;

    font-size: 9px;
    font-weight: 600;
    text-decoration: none;
}

/* =========================================================
   MESAJ VE SPINNER
   ========================================================= */

.hs-ad-history-message {
    margin-top: 16px;
    padding: 13px 15px;

    border: 1px solid;
    border-radius: 13px;

    font-size: 9px;
    line-height: 1.5;
    font-weight: 600;
}

.hs-ad-history-message[hidden] {
    display: none !important;
}

.hs-ad-history-message.is-error {
    border-color: rgba(248, 113, 113, 0.27);

    background: #1b0c0c;
    color: #fca5a5;
}

.hs-ad-history-message.is-success {
    border-color: rgba(74, 222, 128, 0.24);

    background: #0d1a12;
    color: #86efac;
}

.hs-ad-history-spinner {
    width: 14px;
    height: 14px;

    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;

    animation:
        hs-ad-history-spin 0.7s linear infinite;
}

@keyframes hs-ad-history-spin {
    to {
        transform: rotate(360deg);
    }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {
    .hs-ad-history-page {
        width: 91%;
    }

    .hs-ad-history-package-row {
        grid-template-columns:
            minmax(180px, 1.4fr)
            repeat(2, minmax(110px, 1fr));
    }
}

@media (max-width: 820px) {
    .hs-ad-history-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .hs-ad-history-back {
        width: 100%;
    }

    .hs-ad-history-summary {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .hs-ad-history-package-row {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .hs-ad-history-package-main {
        grid-column: 1 / -1;
    }
}

@media (max-width: 560px) {
    .hs-ad-history-page {
        width: 94%;
    }

    .hs-ad-history-hero {
        padding: 21px;
    }

    .hs-ad-history-summary {
        grid-template-columns: 1fr;
    }

    .hs-ad-history-section-header {
        align-items: stretch;
        flex-direction: column;
    }

    .hs-ad-history-add {
        width: 100%;
    }

    .hs-ad-history-package-row {
        grid-template-columns: 1fr;
    }

    .hs-ad-history-package-main {
        grid-column: auto;
    }

    .hs-ad-history-package-total {
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
    }

    .hs-ad-history-package-total > div {
        align-items: flex-start;
    }

    .hs-ad-history-content-dates {
        grid-template-columns: 1fr;
    }
}

.hs-analytics-page {
    width: min(88%, 1280px);
    margin: 0 auto;
    padding: 4px 0 120px;
}

/* =========================================================
   HERO
   ========================================================= */

.hs-analytics-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    overflow: hidden;
    padding: 34px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 26px;
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(37, 99, 235, 0.15),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #050505 0%,
            #080e18 100%
        );
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
}

.hs-analytics-hero-content {
    position: relative;
    z-index: 1;
    min-width: 0;
    max-width: 750px;
}

.hs-analytics-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 12px;
    padding: 12px 17px;
    border: 1px solid rgba(96, 165, 250, 0.18);
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.14);
    color: #60a5fa;
    font-size: 14px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.hs-analytics-hero h1 {
    margin: 0;
    color: #f5f5f5;
    font-size: clamp(28px, 4vw, 40px);
    line-height: 1.16;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.hs-analytics-hero p {
    max-width: 700px;
    margin: 14px 0 0;
    color: #a3a3a3;
    font-size: 16px;
    line-height: 1.75;
}

.hs-analytics-back {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    min-height: 43px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 17px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.055);
    color: #d4d4d4;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
}

/* =========================================================
   TOOLBAR
   ========================================================= */

.hs-analytics-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    margin-top: 18px;
    padding: 19px 21px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 19px;
    background: #080808;
    box-shadow: 0 13px 30px rgba(0, 0, 0, 0.4);
}

.hs-analytics-toolbar-info {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.hs-analytics-toolbar-icon {
    flex: 0 0 auto;
    width: 43px;
    height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: rgba(37, 99, 235, 0.14);
    color: #60a5fa;
    font-size: 32px;
}

.hs-analytics-toolbar-info > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hs-analytics-toolbar-info small {
    color: #737373;
    font-size: 15px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.hs-analytics-toolbar-info strong {
    color: #e5e5e5;
    font-size: 15px;
    font-weight: 800;
}

.hs-analytics-toolbar-info div > span {
    color: #8f8f8f;
    font-size: 13px;
}

.hs-analytics-periods {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px;
    overflow-x: auto;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 13px;
    background: #111111;
}

.hs-analytics-period {
    flex: 0 0 auto;
    min-height: 33px;
    padding: 12px 17px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #8f8f8f;
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
}

.hs-analytics-period.is-active {
    background: #2563eb;
    color: #ffffff;
    box-shadow: 0 7px 17px rgba(37, 99, 235, 0.24);
}

.hs-analytics-period:disabled {
    opacity: 0.5;
}

/* =========================================================
   LOADING / ERROR
   ========================================================= */

.hs-analytics-loading {
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-top: 18px;
    padding: 34px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 22px;
    background: #080808;
    text-align: center;
}

.hs-analytics-loading-spinner {
    width: 38px;
    height: 38px;
    margin-bottom: 14px;
    border: 3px solid rgba(96, 165, 250, 0.18);
    border-top-color: #60a5fa;
    border-radius: 50%;
    animation: hs-analytics-spin 0.8s linear infinite;
}

.hs-analytics-loading strong {
    color: #e5e5e5;
    font-size: 20px;
    font-weight: 800;
}

.hs-analytics-loading p {
    margin: 6px 0 0;
    color: #8f8f8f;
    font-size: 14px;
}

.hs-analytics-error {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
    padding: 21px;
    border: 1px solid rgba(248, 113, 113, 0.24);
    border-radius: 18px;
    background: #1b0c0c;
}

.hs-analytics-error[hidden],
.hs-analytics-content[hidden] {
    display: none !important;
}

.hs-analytics-error > span {
    flex: 0 0 auto;
    width: 43px;
    height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: rgba(220, 38, 38, 0.16);
    color: #f87171;
}

.hs-analytics-error > div {
    min-width: 0;
    flex: 1;
}

.hs-analytics-error strong {
    color: #fca5a5;
    font-size: 16px;
    font-weight: 800;
}

.hs-analytics-error p {
    margin: 4px 0 0;
    color: #f87171;
    font-size: 14px;
}

.hs-analytics-error button {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border: 1px solid rgba(248, 113, 113, 0.2);
    border-radius: 11px;
    background: #111111;
    color: #fca5a5;
    font-size: 14px;
    font-weight: 800;
}

/* =========================================================
   KPI
   ========================================================= */

.hs-analytics-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 13px;
    margin-top: 18px;
}

.hs-analytics-kpi-card {
    position: relative;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 14px;
    overflow: hidden;
    padding: 21px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 19px;
    background: #080808;
    box-shadow: 0 13px 30px rgba(0, 0, 0, 0.38);
}

.hs-analytics-kpi-card::after {
    content: "";
    position: absolute;
    right: -22px;
    bottom: -30px;
    width: 85px;
    height: 85px;
    border-radius: 50%;
    opacity: 0.09;
    background: currentColor;
}

.hs-analytics-kpi-icon {
    flex: 0 0 auto;
    width: 47px;
    height: 47px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    font-size: 20px;
}

.hs-analytics-kpi-card.is-view {
    color: #60a5fa;
}

.hs-analytics-kpi-card.is-view .hs-analytics-kpi-icon {
    background: rgba(37, 99, 235, 0.14);
}

.hs-analytics-kpi-card.is-share {
    color: #a78bfa;
}

.hs-analytics-kpi-card.is-share .hs-analytics-kpi-icon {
    background: rgba(124, 58, 237, 0.15);
}

.hs-analytics-kpi-card.is-save {
    color: #4ade80;
}

.hs-analytics-kpi-card.is-save .hs-analytics-kpi-icon {
    background: rgba(22, 163, 74, 0.14);
}

.hs-analytics-kpi-card.is-content {
    color: #fb923c;
}

.hs-analytics-kpi-card.is-content .hs-analytics-kpi-icon {
    background: rgba(249, 115, 22, 0.14);
}

.hs-analytics-kpi-content {
    position: relative;
    z-index: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.hs-analytics-kpi-content small {
    color: #8f8f8f;
    font-size: 13px;
}

.hs-analytics-kpi-content > strong {
    color: #f5f5f5;
    font-size: 25px;
    font-weight: 800;
}

.hs-analytics-kpi-content > span {
    color: #737373;
    font-size: 15px;
}

.hs-analytics-kpi-content > span b {
    color: #a3a3a3;
}

/* =========================================================
   SECTIONS
   ========================================================= */

.hs-analytics-section {
    margin-top: 20px;
    padding: 26px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 22px;
    background: #080808;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.4);
}

.hs-analytics-section-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
    padding-bottom: 17px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.hs-analytics-section-header > div > span {
    display: block;
    margin-bottom: 5px;
    color: #60a5fa;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.hs-analytics-section-header h2 {
    margin: 0;
    color: #f5f5f5;
    font-size: 32px;
    font-weight: 800;
}

.hs-analytics-section-header p {
    margin: 5px 0 0;
    color: #8f8f8f;
    font-size: 14px;
    line-height: 1.55;
}

.hs-analytics-section-header-icon {
    flex: 0 0 auto;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: rgba(37, 99, 235, 0.14);
    color: #60a5fa;
    font-size: 20px;
}

.hs-analytics-section-header-icon.is-view {
    background: rgba(8, 145, 178, 0.14);
    color: #22d3ee;
}

.hs-analytics-section-header-icon.is-engagement {
    background: rgba(124, 58, 237, 0.15);
    color: #a78bfa;
}

.hs-analytics-section-header-icon.is-platform {
    background: rgba(2, 132, 199, 0.15);
    color: #38bdf8;
}

.hs-analytics-section-header-icon.is-popular {
    background: rgba(249, 115, 22, 0.14);
    color: #fb923c;
}

/* =========================================================
   SHARED CARDS
   ========================================================= */

.hs-analytics-content-overview {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr))
        minmax(240px, 0.8fr);
    gap: 14px;
}

.hs-analytics-type-card,
.hs-analytics-chart-card,
.hs-analytics-comparison-card,
.hs-analytics-metric-card,
.hs-analytics-platform-card {
    min-width: 0;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 17px;
    background: #111111;
}

.hs-analytics-type-card,
.hs-analytics-chart-card,
.hs-analytics-platform-card {
    padding: 20px;
}

/* =========================================================
   TYPE CARDS
   ========================================================= */

.hs-analytics-type-card > header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    margin-bottom: 15px;
}

.hs-analytics-type-icon {
    width: 41px;
    height: 41px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
}

.hs-analytics-type-icon.is-content {
    background: rgba(37, 99, 235, 0.14);
    color: #60a5fa;
}

.hs-analytics-type-icon.is-ad {
    background: rgba(249, 115, 22, 0.14);
    color: #fb923c;
}

.hs-analytics-type-card header div {
    display: flex;
    flex-direction: column;
}

.hs-analytics-type-card header small {
    color: #737373;
    font-size: 15px;
}

.hs-analytics-type-card header strong {
    color: #e5e5e5;
    font-size: 14px;
}

.hs-analytics-type-card header > b {
    color: #f5f5f5;
    font-size: 24px;
}

.hs-analytics-status-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.hs-analytics-status-row {
    display: flex;
    justify-content: space-between;
    padding: 11px 14px;
    border: 1px solid;
    border-radius: 11px;
}

.hs-analytics-status-row span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}

.hs-analytics-status-row strong {
    font-size: 32px;
}

.hs-analytics-status-row.is-active {
    border-color: rgba(74, 222, 128, 0.18);
    background: rgba(22, 163, 74, 0.12);
    color: #4ade80;
}

.hs-analytics-status-row.is-passive {
    border-color: rgba(251, 146, 60, 0.18);
    background: rgba(249, 115, 22, 0.12);
    color: #fb923c;
}

.hs-analytics-status-row.is-reported {
    border-color: rgba(248, 113, 113, 0.2);
    background: rgba(220, 38, 38, 0.12);
    color: #f87171;
}

/* =========================================================
   CHARTS
   ========================================================= */

.hs-analytics-chart-card header small {
    color: #737373;
    font-size: 15px;
}

.hs-analytics-chart-card header strong {
    color: #e5e5e5;
    font-size: 14px;
}

.hs-analytics-chart-header {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 15px;
}

.hs-analytics-chart-badges,
.hs-analytics-chart-legend {
    display: flex;
    align-items: center;
    gap: 12px;
}

.hs-analytics-chart-badges span,
.hs-analytics-chart-legend span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #8f8f8f;
    font-size: 20px;
}

.hs-analytics-chart-badges i,
.hs-analytics-chart-legend i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.hs-analytics-chart-badges i.is-content,
.hs-analytics-chart-legend i.is-content {
    background: #60a5fa;
}

.hs-analytics-chart-badges i.is-ad,
.hs-analytics-chart-legend i.is-ad {
    background: #fb923c;
}

.hs-analytics-chart-badges i.is-share {
    background: #a78bfa;
}

.hs-analytics-chart-badges i.is-save {
    background: #4ade80;
}

.hs-analytics-chart-container {
    position: relative;
    width: 100%;
    height: 310px;
}

.hs-analytics-chart-container.is-platform {
    height: 300px;
}

.hs-analytics-doughnut-container {
    position: relative;
    height: 165px;
}

.hs-analytics-doughnut-center {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    flex-direction: column;
    transform: translate(-50%, -50%);
}

.hs-analytics-doughnut-center small {
    color: #737373;
    font-size: 12px;
}

.hs-analytics-doughnut-center strong {
    color: #f5f5f5;
    font-size: 32px;
}

/* =========================================================
   COMPARISON
   ========================================================= */

.hs-analytics-comparison-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.hs-analytics-comparison-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 21px;
}

.hs-analytics-comparison-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
}

.hs-analytics-comparison-icon.is-content {
    background: rgba(37, 99, 235, 0.14);
    color: #60a5fa;
}

.hs-analytics-comparison-icon.is-ad {
    background: rgba(249, 115, 22, 0.14);
    color: #fb923c;
}

.hs-analytics-comparison-icon.is-rate {
    background: rgba(5, 150, 105, 0.14);
    color: #34d399;
}

.hs-analytics-comparison-card > div {
    display: flex;
    flex-direction: column;
}

.hs-analytics-comparison-card small {
    color: #8f8f8f;
    font-size: 15px;
}

.hs-analytics-comparison-card strong {
    color: #f5f5f5;
    font-size: 20px;
}

.hs-analytics-comparison-card span {
    color: #737373;
    font-size: 13px;
}

.hs-analytics-comparison-card span b {
    color: #a3a3a3;
}

/* =========================================================
   ENGAGEMENT
   ========================================================= */

.hs-analytics-engagement-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.hs-analytics-metric-card {
    padding: 21px;
}

.hs-analytics-metric-card > header {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 12px;
}

.hs-analytics-metric-card header > span {
    width: 41px;
    height: 41px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
}

.hs-analytics-metric-card header > span.is-share {
    background: rgba(124, 58, 237, 0.15);
    color: #a78bfa;
}

.hs-analytics-metric-card header > span.is-save {
    background: rgba(22, 163, 74, 0.14);
    color: #4ade80;
}

.hs-analytics-metric-card header div {
    display: flex;
    flex-direction: column;
}

.hs-analytics-metric-card header small {
    color: #8f8f8f;
    font-size: 15px;
}

.hs-analytics-metric-card header strong {
    color: #f5f5f5;
    font-size: 20px;
}

.hs-analytics-metric-card > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.hs-analytics-metric-card > div > span {
    display: flex;
    justify-content: space-between;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    background: #080808;
    color: #8f8f8f;
    font-size: 15px;
}

.hs-analytics-metric-card > div b {
    color: #d4d4d4;
}

/* =========================================================
   PLATFORMS
   ========================================================= */

.hs-analytics-platform-layout {
    display: grid;
    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(280px, 0.65fr);
    gap: 14px;
}

.hs-analytics-platform-card > header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 14px;
}

.hs-analytics-platform-card header small {
    color: #737373;
    font-size: 15px;
}

.hs-analytics-platform-card header strong {
    color: #e5e5e5;
    font-size: 14px;
}

.hs-analytics-platform-card header > span {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 6px 8px;
    border-radius: 9px;
    background: rgba(37, 99, 235, 0.14);
    color: #60a5fa;
    font-size: 12px;
}

.hs-analytics-platform-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hs-analytics-platform-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    padding: 9px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 11px;
    background: #080808;
}

.hs-analytics-platform-row-icon {
    width: 33px;
    height: 33px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(2, 132, 199, 0.15);
    color: #38bdf8;
}

.hs-analytics-platform-row-content > div {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
}

.hs-analytics-platform-row-content strong {
    color: #d4d4d4;
    font-size: 13px;
}

.hs-analytics-platform-row-content span {
    color: #737373;
    font-size: 16px;
}

.hs-analytics-platform-progress {
    display: block;
    height: 5px;
    overflow: hidden;
    border-radius: 999px;
    background: #252525;
}

.hs-analytics-platform-progress i {
    display: block;
    height: 100%;
    background: #38bdf8;
}

.hs-analytics-platform-row > b {
    color: #e5e5e5;
    font-size: 32px;
}

.hs-analytics-platform-empty {
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #737373;
}

/* =========================================================
   TABLE
   ========================================================= */

.hs-analytics-table-wrapper {
    overflow-x: auto;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 15px;
}

.hs-analytics-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
}

.hs-analytics-table th,
.hs-analytics-table td {
    padding: 15px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    text-align: left;
}

.hs-analytics-table th {
    background: #111111;
    color: #8f8f8f;
    font-size: 15px;
    text-transform: uppercase;
}

.hs-analytics-table td {
    color: #a3a3a3;
    font-size: 12px;
}

.hs-analytics-table tbody tr:hover {
    background: #0d0d0d;
}

.hs-analytics-table-content {
    min-width: 230px;
    display: flex;
    align-items: center;
    gap: 9px;
}

.hs-analytics-table-content > span {
    width: 29px;
    height: 29px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: rgba(37, 99, 235, 0.14);
    color: #60a5fa;
}

.hs-analytics-table-content > div {
    display: flex;
    flex-direction: column;
}

.hs-analytics-table-content strong {
    max-width: 320px;
    overflow: hidden;
    color: #e5e5e5;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hs-analytics-table-content small {
    color: #737373;
    font-size: 12px;
}

.hs-analytics-type-badge,
.hs-analytics-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 7px;
    border: 1px solid;
    border-radius: 999px;
    font-size: 12px;
}

.hs-analytics-type-badge.is-content {
    border-color: rgba(96, 165, 250, 0.2);
    background: rgba(37, 99, 235, 0.13);
    color: #60a5fa;
}

.hs-analytics-type-badge.is-ad {
    border-color: rgba(251, 146, 60, 0.2);
    background: rgba(249, 115, 22, 0.13);
    color: #fb923c;
}

.hs-analytics-status-badge.is-active {
    border-color: rgba(74, 222, 128, 0.2);
    background: rgba(22, 163, 74, 0.13);
    color: #4ade80;
}

.hs-analytics-status-badge.is-passive {
    border-color: rgba(251, 146, 60, 0.2);
    background: rgba(249, 115, 22, 0.13);
    color: #fb923c;
}

.hs-analytics-status-badge.is-reported {
    border-color: rgba(248, 113, 113, 0.2);
    background: rgba(220, 38, 38, 0.13);
    color: #f87171;
}

.hs-analytics-table-number {
    color: #e5e5e5;
    font-size: 14px;
}

.hs-analytics-table-action {
    width: 31px;
    height: 31px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(96, 165, 250, 0.18);
    border-radius: 10px;
    background: rgba(37, 99, 235, 0.13);
    color: #60a5fa;
}

.hs-analytics-table-empty {
    padding: 35px !important;
    color: #737373 !important;
    text-align: center !important;
}

/* =========================================================
   ANIMATION / RESPONSIVE
   ========================================================= */

@keyframes hs-analytics-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 1150px) {
    .hs-analytics-page {
        width: 93%;
    }

    .hs-analytics-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hs-analytics-content-overview {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hs-analytics-chart-card.is-compact {
        grid-column: 1 / -1;
    }
}

@media (max-width: 900px) {
    .hs-analytics-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .hs-analytics-comparison-grid,
    .hs-analytics-platform-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    .hs-analytics-page {
        width: 95%;
        padding-bottom: 90px;
    }

    .hs-analytics-hero {
        align-items: flex-start;
        flex-direction: column;
        padding: 26px;
    }

    .hs-analytics-back {
        width: 100%;
    }

    .hs-analytics-kpi-grid,
    .hs-analytics-content-overview,
    .hs-analytics-engagement-grid {
        grid-template-columns: 1fr;
    }

    .hs-analytics-chart-card.is-compact {
        grid-column: auto;
    }

    .hs-analytics-section {
        padding: 20px;
    }

    .hs-analytics-chart-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .hs-analytics-chart-container {
        height: 260px;
    }

    .hs-analytics-error {
        flex-direction: column;
    }

    .hs-analytics-error button {
        justify-content: center;
        width: 100%;
    }
}

.hs-analytics-loading[hidden],
.hs-analytics-error[hidden],
.hs-analytics-content[hidden] {
    display: none !important;
}

/* =========================================================
   OKUNAKLILIK DÜZELTMELERİ
   ========================================================= */

.hs-analytics-page p,
.hs-analytics-page span,
.hs-analytics-page small,
.hs-analytics-page strong,
.hs-analytics-page b,
.hs-analytics-page th,
.hs-analytics-page td,
.hs-analytics-page button,
.hs-analytics-page a {
    line-height: 1.5;
}

.hs-analytics-loading[hidden],
.hs-analytics-error[hidden],
.hs-analytics-content[hidden] {
    display: none !important;
}

/* =========================================================
   MOBİL DASHBOARD NAVBAR
   AÇIK VE KOYU TEMADA ORTAK GRİ TASARIM
========================================================= */

.mobile-dashboard-navbar {
    display: none;
}


/* =========================================================
   MOBİL GÖRÜNÜM
========================================================= */

@media (max-width: 768px) {

    /*
     * Mobilde arama ve içerik ekleme işlemleri
     * alt navbar üzerinden yapılacağı için header'daki
     * karşılıkları gizlenir.
     */

    .desktop-header-search-button,
    .desktop-header-add-button {
        display: none !important;
    }

    /*
     * Header'da mesajlar, bildirimler ve profil
     * görünmeye devam eder.
     */

    .header-right {
        gap: 6px;
    }

    .header-action-nav {
        gap: 5px;
    }

    /*
     * Alt navbarın içerik ve footer'ın üzerine
     * binmemesi için sayfanın altına boşluk bırakılır.
     */

    .dashboard-page {
        min-height: 100dvh;
        padding-bottom:
            calc(
                82px
                + env(safe-area-inset-bottom)
            );
    }

    .dashboard-main {
        min-height: 0;
    }

    .site-footer {
        margin-bottom: 0;
    }

    /*
     * Sabit alt navbar
     */

    .mobile-dashboard-navbar {
        position: fixed;

        right: 0;
        bottom: 0;
        left: 0;

        z-index: 150;

        min-height:
            calc(
                68px
                + env(safe-area-inset-bottom)
            );

        display: grid;

        grid-template-columns:
            repeat(
                5,
                minmax(0, 1fr)
            );

        align-items: end;

        padding:
            8px
            8px
            calc(
                7px
                + env(safe-area-inset-bottom)
            );

        border-top:
            1px solid
            rgba(255, 255, 255, 0.12);

        background:
            rgba(49, 52, 57, 0.97);

        box-shadow:
            0 -10px 35px
            rgba(0, 0, 0, 0.28);

        backdrop-filter:
            blur(18px);

        -webkit-backdrop-filter:
            blur(18px);
    }

    /*
     * Standart navbar bağlantısı
     */

    .mobile-dashboard-nav-item {
        position: relative;

        min-width: 0;
        min-height: 53px;

        display: flex;

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

        gap: 4px;

        padding: 5px 2px;

        border-radius: 13px;

        color:
            rgba(255, 255, 255, 0.6);

        text-decoration: none;

        -webkit-tap-highlight-color:
            transparent;

        transition:
            color 0.18s ease,
            background-color 0.18s ease,
            transform 0.18s ease;
    }

    .mobile-dashboard-nav-item:active {
        transform: scale(0.95);
    }

    .mobile-dashboard-nav-icon {
        width: 29px;
        height: 27px;

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

        border-radius: 9px;

        font-size: 18px;

        transition:
            color 0.18s ease,
            background-color 0.18s ease;
    }

    .mobile-dashboard-nav-label {
        display: block;

        width: 100%;

        overflow: hidden;

        font-size: 9px;
        line-height: 1.15;
        font-weight: 600;

        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /*
     * Aktif sayfa
     */

    .mobile-dashboard-nav-item.is-active {
        color: #ffffff;
    }

    .mobile-dashboard-nav-item.is-active
    .mobile-dashboard-nav-icon {
        background:
            rgba(255, 255, 255, 0.12);
    }

    .mobile-dashboard-nav-item.is-active::after {
        content: "";

        position: absolute;

        right: 29%;
        bottom: 0;
        left: 29%;

        height: 2px;

        border-radius: 999px;

        background: #ffffff;
    }

    /*
     * Ortadaki içerik ekleme butonu
     */

    .mobile-dashboard-nav-add {
        overflow: visible;

        justify-content: flex-start;

        padding-top: 0;

        color: #ffffff;
    }

    .mobile-dashboard-nav-add-icon {
        width: 48px;
        height: 48px;

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

        margin-top: -23px;
        margin-bottom: 1px;

        border:
            5px solid
            #313439;

        border-radius: 17px;

        background:
            linear-gradient(
                135deg,
                #787d84,
                #555a61
            );

        color: #ffffff;

        font-size: 20px;

        box-shadow:
            0 8px 22px
            rgba(0, 0, 0, 0.38);

        transition:
            transform 0.18s ease,
            background-color 0.18s ease;
    }

    .mobile-dashboard-nav-add:active
    .mobile-dashboard-nav-add-icon {
        transform: scale(0.92);
    }

    .mobile-dashboard-nav-add.is-active
    .mobile-dashboard-nav-add-icon {
        background:
            linear-gradient(
                135deg,
                #92969c,
                #656a71
            );
    }

    .mobile-dashboard-nav-add.is-active::after {
        display: none;
    }

    /*
     * Navbar üzerindeki ikonların tema CSS'inden
     * renk miras almasını engeller.
     */

    .mobile-dashboard-navbar i {
        color: inherit;
    }
}


/* =========================================================
   ÇOK KÜÇÜK TELEFONLAR
========================================================= */

@media (max-width: 390px) {

    .mobile-dashboard-navbar {
        padding-right: 4px;
        padding-left: 4px;
    }

    .mobile-dashboard-nav-item {
        padding-right: 1px;
        padding-left: 1px;
    }

    .mobile-dashboard-nav-icon {
        font-size: 17px;
    }

    .mobile-dashboard-nav-label {
        font-size: 8px;
    }

    .mobile-dashboard-nav-add-icon {
        width: 46px;
        height: 46px;

        margin-top: -21px;

        font-size: 19px;
    }
}


/* =========================================================
   MASAÜSTÜNDE KESİNLİKLE GİZLE
========================================================= */

@media (min-width: 769px) {

    .mobile-dashboard-navbar {
        display: none !important;
    }

    .desktop-header-search-button,
    .desktop-header-add-button {
        display: flex;
    }
}