.panel-page body,
body.panel-page {
    background: #f3f5f7;
}

/* HamburgSymbols font (KESİN KALSIN) */
@font-face {
    font-family: 'HamburgSymbols';
    src: url('../../fonts/HamburgSymbols.ttf');
    font-weight: normal;
    font-style: normal;
}


/* Küçük kartlar */
.thumb-card {
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease, outline-color .12s ease;
    outline: 2px solid transparent;
}

.thumb-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(0, 0, 0, .10);
}

.thumb-card.active {
    outline-color: #479483;
}

.text-planet tspan:first-child {
    font-family: 'HamburgSymbols', sans-serif !important;
    font-size: 30px;
}


.ring-zodiac-bg {
    fill: #ffffff;
    stroke: #333;
    stroke-width: 1.5;
}

.ring-houses-bg {
    fill: #dbead5;
    stroke: #666;
    stroke-width: 1;
}

.circle-center {
    fill: #ffffff;
    stroke: #666;
    stroke-width: 1;
}

.line-zodiac-divider {
    stroke: #999;
    stroke-width: 2;
}

/* ASC - MC Özel Çizgileri */
.line-house-normal {
    stroke: #999;
    stroke-width: 1.5;
}

.line-house-asc {
    stroke: #e74c3c;
    stroke-width: 4;
}

/* Kalın Kırmızı ASC */
.line-house-mc {
    stroke: #000;
    stroke-width: 3;
}

/* Kalın Siyah MC */

/* ASC/MC/DSC/IC çizgileri ve etiketleri: Sadece modal (Fancybox) açıkken göster */
.axis-modal-only {
    visibility: hidden;
}

.astro-modal-wrapper .axis-modal-only {
    visibility: visible;
}

.tick-thin {
    stroke: #555;
    stroke-width: 1;
}

.tick-medium {
    stroke: #e74c3c;
    stroke-width: 1.5;
}

.tick-thick {
    stroke: #000;
    stroke-width: 2.5;
}

.aspect-line-red {
    stroke: #e74c3c;
    stroke-width: 1;
    opacity: 0.6;
}

.aspect-line-blue {
    stroke: #3498db;
    stroke-width: 1;
    opacity: 0.6;
}

.text-house-num {
    font-size: 14px;
    fill: #555;
    font-weight: 600;
}



.form-card {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .06);
}



.chart-card-mini {
    background: #ffffff;
    border-radius: 14px;
    padding: 0;
    position: relative;
    overflow: visible;
}

/* Thumb içindeki SVG kenarlara otursun (pt-2'yi de sıfırla) */
.chart-card-mini .thumb-svg {
    padding: 0 !important;
    border-radius: inherit;
    overflow: hidden;
}

/* SVG ölçek */
.thumb-svg svg,
.main-svg svg {
    width: 90%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Drag hint */
.drag-handle {
    position: absolute;
    right: 10px;
    bottom: 10px;
    font-size: 10px;
    user-select: none;
    z-index: 2;
    background: #eef2f7;
    padding: 4px 8px;
    border-radius: 10px;
    opacity: 0;
    transition: opacity .12s ease;
}

.thumb-card:hover .drag-handle {
    opacity: .75;
}

/* Dropzone */
.dropzone {
    border: 2px dashed rgba(47, 143, 122, .25);
    border-radius: 14px;
    background: linear-gradient(180deg, #fff, #fbfcfc);
}

.dropzone.dragover {
    border-color: #479483;
    box-shadow: 0 0 0 4px rgba(47, 143, 122, .10);
}

/* Burç sembolleri (Dış halka) */
.text-symbol {
    font-family: 'HamburgSymbols', sans-serif !important;
    font-size: 24px;
    font-weight: 600;
}

/* Sağ panel yeşil tab butonları */
.right-tabs-bar .nav-link {
    background: #2f8f7a;
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    padding: 8px 10px;
    border-radius: 10px;
}

.right-tabs-bar .nav-link.active {
    background: #1f6f5e;
}


/* ✅ Fancybox'ı modern modal gibi göster */
.astro-fancybox .fancybox__content {
    padding: 0 !important;
    border-radius: 18px;
    overflow: hidden;
    max-width: min(1100px, 96vw) !important;
    background: transparent !important;
}

.astro-modal {
    background: #fff;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .18);
}

.astro-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(15, 23, 42, .08);
    background: linear-gradient(180deg, #ffffff, #fafafa);
}

.astro-modal__title {
    font-weight: 800;
    font-size: 1rem;
    line-height: 1.2;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 75vw;
}

.astro-modal__close {
    border-radius: 999px;
    padding: 6px 10px;
}

.astro-modal__body {
    background: radial-gradient(circle at 20% 10%, rgba(255, 255, 255, .9), rgba(245, 246, 248, 1) 60%);
}

.astro-modal__svg {
    display: flex;
    justify-content: center;
    /* yatay ortala */
    align-items: center;
    /* dikey ortala */
    overflow-x: hidden;
}

.astro-modal__svg svg {
    width: 80%;
    height: auto;
    display: block;
    /* inline davranışı kapatır */
}

/* ✅ Mobil: neredeyse fullscreen */
@media (max-width: 576px) {

    .astro-modal__svg {
        max-height: calc(100dvh - 120px);
    }

    .astro-modal__title {
        max-width: 62vw;
    }
}

/* ✅ Fancybox açıkken body scroll'u kapat (masaüstü yan scroll fix) */
body.fancybox-active {
    overflow: hidden !important;
}

/* Fancybox container taşma yapmasın */
.fancybox__container {
    overflow: hidden !important;
}

/* ✅ Fancybox arka planını açık gri yap */
.fancybox__backdrop {
    background: rgba(120, 130, 150, 0.35) !important;
    backdrop-filter: blur(2px);
}

@media (max-width: 992px) {
    #mobileChartSelect {
        border-radius: 14px;
        padding: 14px 48px 14px 16px;
        font-weight: 700;
        font-size: 15px;
        border: 1px solid rgba(15, 23, 42, .10);
        background: linear-gradient(135deg, rgba(47, 143, 122, .06), rgba(255, 255, 255, 1));
        color: #334155;
        box-shadow: 0 4px 14px rgba(0, 0, 0, .05);
        transition: all .2s ease;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background-image: linear-gradient(135deg, rgba(47, 143, 122, .06), rgba(255, 255, 255, 1)),
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23334155' fill-opacity='0.8' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
        background-repeat: no-repeat, no-repeat;
        background-position: center, right 12px center;
        background-size: auto, 20px;
        cursor: pointer;
    }

    #mobileChartSelect:hover,
    #mobileChartSelect:focus {
        background-image: linear-gradient(135deg, rgba(47, 143, 122, .12), rgba(255, 255, 255, 1)),
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230f172a' fill-opacity='1' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
        background-repeat: no-repeat, no-repeat;
        background-position: center, right 12px center;
        background-size: auto, 20px;
        border-color: rgba(47, 143, 122, .25);
        color: #0f172a;
        box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
    }

    #mobileChartSelect option {
        padding: 12px;
        background: #fff;
        color: #334155;
    }

    #mobileChartSelect option:checked {
        background: linear-gradient(135deg, rgba(47, 143, 122, .15), rgba(255, 255, 255, 1));
        font-weight: 700;
    }
}

.form-select-modern {
    border-radius: 8px;
    padding: 9px 12px;
    font-weight: 600;
    border: 1px solid #cbd5e1;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .05);
    background: #fff;
    transition: all 0.2s ease;
}

.form-select-modern:hover {
    border-color: #2f8f7a;
    box-shadow: 0 3px 10px rgba(47, 143, 122, .15);
}

.form-select-modern:focus {
    border-color: #2f8f7a;
    box-shadow: 0 0 0 3px rgba(47, 143, 122, .1);
    outline: none;
}

.btn-action {
    border-radius: 8px;
    padding: 9px 14px;
    font-weight: 600;
    transition: all 0.2s ease;
    border: 1px solid #2f8f7a;
    background-color: #2f8f7a;
    color: #FFFFFF;
}

.btn-action:hover {
    background-color: #1f6f5e;
    border-color: #1f6f5e;
    color: #FFFFFF;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(47, 143, 122, .25);
}

/* Üst aksiyonlar (Yeni Harita / Haritalarım) - Eski header stili */
.btn-soft {
    border-radius: 8px;
    padding: 9px 16px;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(47, 143, 122, .15);
    color: #ffffff;
    background: #2f8f7a;
    border: 1px solid #2f8f7a;
    transition: all 0.2s ease;
}

.btn-soft:hover {
    background: #1f6f5e;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(47, 143, 122, .25);
}

/* Mobilde tam genişlik, yan yana */
@media (max-width: 576px) {
    .top-actions {
        justify-content: center;
    }

    .top-actions .btn-soft {
        flex: 1 1 auto;
    }
}

.btn-soft-two {
    border-radius: 8px;
    background-color: #2f8f7a;
    color: #FFFFFF;
    padding: 9px 16px;
    font-weight: 600;
    border: 1px solid #2f8f7a;
    transition: all 0.2s ease;
}

.btn-soft-two:hover {
    background-color: #1f6f5e;
    color: #FFFFFF;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(47, 143, 122, .25);
}

.btn-soft-three {
    border-radius: 8px;
    background-color: #2f8f7a;
    color: #FFFFFF;
    padding: 9px 16px;
    font-weight: 600;
    border: 1px solid #2f8f7a;
    transition: all 0.2s ease;
}

.btn-soft-three:hover {
    background-color: #1f6f5e;
    color: #FFFFFF;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(47, 143, 122, .25);
}

/* btn-color-three - Transit butonu için (solid yeşil) */
.btn-color-three {
    border-radius: 8px;
    background-color: #2f8f7a;
    color: #FFFFFF;
    padding: 9px 16px;
    font-weight: 600;
    border: 1px solid #2f8f7a;
    transition: all 0.2s ease;
}

.btn-color-three:hover {
    background-color: #1f6f5e;
    color: #FFFFFF;
    border-color: #1f6f5e;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(47, 143, 122, .25);
}

/* btn-main-green (Eski header stiline uyumlu yeşil buton) */
.btn-main-green {
    border-radius: 8px;
    background-color: #2f8f7a;
    color: #FFFFFF;
    padding: 9px 16px;
    font-weight: 600;
    border: 1px solid #2f8f7a;
    transition: all 0.2s ease;
}

.btn-main-green:hover {
    background-color: #1f6f5e;
    color: #FFFFFF;
    border-color: #1f6f5e;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(47, 143, 122, 0.25);
}

.btn-main-green:active {
    transform: translateY(0) scale(0.98);
}

/* Genel buton outline stilleri - Hepsi yeşil renkte */
.dynamic-toolbar .btn-outline-primary {
    border-radius: 8px;
    padding: 9px 14px;
    font-weight: 600;
    transition: all 0.2s ease;
    background-color: #2f8f7a;
    color: #FFFFFF;
    border-color: #2f8f7a;
}

.dynamic-toolbar .btn-outline-primary:hover {
    background-color: #1f6f5e;
    color: #FFFFFF;
    border-color: #1f6f5e;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(47, 143, 122, 0.25);
}

.dynamic-toolbar .btn-outline-warning {
    border-radius: 8px;
    padding: 9px 14px;
    font-weight: 600;
    transition: all 0.2s ease;
    background-color: #2f8f7a;
    color: #FFFFFF;
    border-color: #2f8f7a;
}

.dynamic-toolbar .btn-outline-warning:hover {
    background-color: #1f6f5e;
    color: #FFFFFF;
    border-color: #1f6f5e;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(47, 143, 122, 0.25);
}

.dynamic-toolbar .btn-outline-dark {
    border-radius: 8px;
    padding: 9px 14px;
    font-weight: 600;
    transition: all 0.2s ease;
    background-color: #2f8f7a;
    color: #FFFFFF;
    border-color: #2f8f7a;
}

.dynamic-toolbar .btn-outline-dark:hover {
    background-color: #1f6f5e;
    color: #FFFFFF;
    border-color: #1f6f5e;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(47, 143, 122, 0.25);
}

/* Wave effect (optional ripple animation) */
.waves-effect {
    position: relative;
    overflow: hidden;
}

.waves-effect:active::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    animation: ripple 0.6s ease-out;
}

@keyframes ripple {
    to {
        transform: translate(-50%, -50%) scale(4);
        opacity: 0;
    }
}

/* ─── Yeni Harita Dropdown ─── */
.chart-create-dropdown {
    position: static;
    display: inline-block;
}

.chart-create-arrow {
    font-size: 10px;
    transition: transform .25s ease;
}

.chart-create-dropdown.open .chart-create-arrow {
    transform: rotate(180deg);
}

.chart-create-menu {
    position: fixed;
    z-index: 9999;
    min-width: 280px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
    pointer-events: none;
}

.chart-create-dropdown.open .chart-create-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.chart-create-menu-inner {
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12), 0 0 0 1px rgba(0, 0, 0, .06);
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow: hidden;
}

.chart-create-option {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: all .2s ease;
    text-align: left;
    width: 100%;
}

.chart-create-option:hover {
    background: #f0fdf4;
    transform: translateX(3px);
    box-shadow: 0 2px 8px rgba(47, 143, 122, .08);
}

.chart-create-option:active {
    transform: translateX(2px) scale(.98);
}

.chart-create-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .15);
}

.chart-create-label {
    display: flex;
    flex-direction: column;
    line-height: 1.4;
}

.chart-create-label strong {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
}

.chart-create-label small {
    font-size: 12px;
    color: #64748b;
    font-weight: 400;
}

/* Mobilde menü genişliği ayarı */
@media (max-width: 576px) {
    .chart-create-menu {
        min-width: 250px;
        left: 0;
        right: auto;
    }
}


.astro-footer-text {
    font-size: 13px;
    color: #64748b;
    font-weight: 600;
}

/* ===== Modern Modal ===== */
.modal-modern {
    border-radius: 18px;
    border: 1px solid rgba(15, 23, 42, .08);
    box-shadow: 0 24px 80px rgba(15, 23, 42, .18);
}

.modal-modern__header {
    background: linear-gradient(180deg, #ffffff, #fafafa);
    border-bottom: 1px solid rgba(15, 23, 42, .08);
}

.modal-modern__body {
    background: radial-gradient(circle at 20% 10%, rgba(255, 255, 255, .9), rgba(245, 246, 248, 1) 60%);
}

.modal-modern__footer {
    background: #fff;
    border-top: 1px solid rgba(15, 23, 42, .08);
}

/* inputs */
.form-control-modern {
    border-radius: 14px;
    border: 1px solid rgba(15, 23, 42, .14);
    padding: 10px 12px;
    font-weight: 600;
}

.form-control-modern:focus {
    box-shadow: 0 0 0 .25rem rgba(59, 130, 246, .18);
    border-color: rgba(59, 130, 246, .55);
}

/* input-group */
.input-group-modern .input-group-text {
    border-radius: 14px 0 0 14px;
    border: 1px solid rgba(15, 23, 42, .14);
    background: #fff;
}

.input-group-modern .form-control-modern {
    border-radius: 0 14px 14px 0;
}

/* buttons */
.btn-modern {
    border-radius: 14px;
    padding: 10px 14px;
    font-weight: 800;
}

/* autocomplete results */
.results-modern {
    margin-top: 8px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, .10);
}

.results-modern .list-group-item {
    border: 0;
    padding: 10px 12px;
    font-weight: 650;
}

/* mobile */
@media (max-width: 576px) {
    .modal-modern {
        border-radius: 0;
    }

    .btn-modern {
        width: 100%;
    }

    .modal-modern__footer {
        gap: 10px;
    }
}

/* ===== MyCharts page ===== */
.mychart-card {
    border-radius: 16px;
    border: 1px solid rgba(15, 23, 42, .08);
    box-shadow: 0 12px 30px rgba(15, 23, 42, .06);
    transition: transform .12s ease, box-shadow .12s ease;
    background: linear-gradient(180deg, #fff, #fbfbfc);
}

.mychart-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 45px rgba(15, 23, 42, .12);
}

.mychart-title {
    font-weight: 900;
    color: #0f172a;
    line-height: 1.2;
    margin-bottom: 6px;
}

.mychart-meta {
    font-size: 13px;
    color: #64748b;
    font-weight: 650;
}

.mychart-sub {
    margin-top: 8px;
    font-size: 13px;
    color: #334155;
    font-weight: 650;
}

.btn-icon {
    border-radius: 12px;
    padding: 6px 8px;
}

@media (max-width: 576px) {
    .mychart-card {
        border-radius: 14px;
    }
}

/* stretched-link üstte kalmasın, sil butonu tıklanabilsin */
.delete-form {
    position: relative;
    z-index: 5;
}

.delete-form button {
    position: relative;
    z-index: 6;
}

.green-color {
    color: #1f6f5e;
}


.btn-color-one {
    background-color: #bece8a;
    color: #ffffff;
}

.btn-color-one:hover {
    background-color: #ffffff;
    color: #bece8a;
    border: 1px solid #bece8a;
}

.btn-color-two {
    background-color: #9E2A2B;
    color: #ffffff;
}

.btn-color-two:hover {
    background-color: #ffffff;
    color: #9E2A2B;
    border: 1px solid #9E2A2B;
}

/* btn-color-three tanımı yukarıda yapıldı (satır 438) */

.btn-color-four {
    background: #1f6f5e;
}

.btn-color-four:hover {
    background: #1f6f5e;
}

/* ASC - MC Özel Çizgileri */
.transit-line-house-normal {
    stroke: #999;
    stroke-width: 1.5;
}

.transit-line-house-asc {
    stroke: #e74c3c;
    stroke-width: 2;
}

/* Kalın Kırmızı ASC */
.transit-line-house-mc {
    stroke: #000;
    stroke-width: 3;
}

.transit-tick-fat {
    stroke: #000;
    stroke-width: 2;
    stroke-linecap: round;
    opacity: .9;
}

/* === Relationship overlay (Synastry) === */
.relationship-tick {
    stroke: #e91e63;
    stroke-width: 2;
    stroke-linecap: round;
    opacity: .9;
}

.relationship-line-house-normal {
    stroke: #e91e63;
    stroke-width: 1.5;
    opacity: .65;
}

.relationship-line-house-asc {
    /* Çoklu haritalarda ASC: kırmızı */
    stroke: #e74c3c;
    stroke-width: 2.2;
    opacity: .9;
}

.relationship-line-house-mc {
    /* Çoklu haritalarda MC: siyah */
    stroke: #000;
    stroke-width: 2.6;
    opacity: .9;
}


/* Preview Action Bar Container */
.preview-action-bar {
    background: linear-gradient(to right, #f0fdf4, #ffffff);
    border: 1px solid #bbf7d0;
    border-left: 5px solid #16a34a;
    /* Sol tarafa vurgulu bir çizgi ekledim */
    border-radius: 12px;
    padding: 16px 24px;
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04);
    /* Gölgeyi biraz artırdım */
    animation: slideDown 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    /* Daha yumuşak animasyon */
}

/* Sol taraftaki bilgi alanı */
.preview-info {
    font-size: 0.95rem;
    color: #166534;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 12px;
    /* İkon ile yazı arasını açtım */
}

/* Modern Kaydet Butonu */
.btn-save-modern {
    background-color: #16a34a;
    color: white;
    border: none;
    border-radius: 50px;
    padding: 10px 28px;
    /* Biraz daha geniş */
    font-weight: 700;
    font-size: 0.95rem;
    transition: all 0.25s ease;
    box-shadow: 0 4px 12px rgba(22, 163, 74, 0.25);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    cursor: pointer;
}

.btn-save-modern:hover {
    background-color: #15803d;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(22, 163, 74, 0.35);
}


/* Animasyon */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobilde alt alta dizilmesi için */
@media (max-width: 576px) {
    .preview-action-bar {
        justify-content: center;
        text-align: center;
        flex-direction: column;
    }

    .preview-info {
        flex-direction: column;
        margin-bottom: 10px;
    }

    .btn-save-modern {
        width: 100%;
        justify-content: center;
    }
}

/* Fixed Stars */
.extra-hidden {
    display: none !important;
}

/* Etiketlerin Temel Hali */
.star-label {
    border: 1px solid #e2e8f0;
    background-color: #ffffff;
    color: #475569;
    border-radius: 50px;
    /* Tam yuvarlak hap şekli */
    padding: 8px 16px;
    font-size: 0.9rem;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    overflow: hidden;
}

/* Hover Durumu */
.star-label:hover {
    background-color: #f1f5f9;
    transform: translateY(-1px);
    border-color: #cbd5e1;
}

/* Check iconu varsayılan olarak gizli */
.star-label .check-icon {
    font-size: 0.7rem;
    width: 0;
    overflow: hidden;
    transition: all 0.25s ease;
    opacity: 0;
}

/* --- SEÇİLİ (CHECKED) DURUMU --- */
.btn-check:checked+.star-label {
    background-color: #4f46e5;
    /* Astro Bilge konseptine uygun modern indigo rengi */
    color: #ffffff !important;
    border-color: #4f46e5;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3) !important;
    padding-left: 12px;
    /* İkon açılınca yer açmak için */
}

/* Seçili olunca ikonu göster */
.btn-check:checked+.star-label .check-icon {
    width: 14px;
    opacity: 1;
}


/* Animasyon */
.modal.fade .modal-dialog {
    transform: scale(0.95);
    transition: transform 0.3s ease-out;
}

.modal.show .modal-dialog {
    transform: scale(1);
}

/* --- Fancybox & Zoom CSS --- */

/* 1. Modal Wrapper: Tam ekranı kaplasın ama taşmasın */
.astro-modal-wrapper {
    display: flex;
    flex-direction: column;
    height: 90vh;
    /* Mobilde taşmayı önler */
    width: 100%;
    max-width: 100%;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
}


.astro-modal__footer {
    flex: 0 0 auto;
    z-index: 10;
    background: #f8f9fa;
    border-top: 1px solid #eee;
    justify-content: center;
    align-items: center;
    padding: 12px 16px;

}

/* 3. Body: Kalan alanı kaplasın */
.astro-modal__body {
    flex: 1 1 auto;
    position: relative;
    overflow: hidden;
    /* SVG dışarı taşarsa gizle */
    background: radial-gradient(circle at center, #fbfbfb, #eff1f5);
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 4. PanZoom Container ve SVG */
.panzoom-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    /* Sürüklerken taşmayı engeller */
}

.panzoom-container svg {
    /* SVG'nin başlangıçta ortada ve sığmış olması için */
    max-width: 100% !important;
    max-height: 105% !important;
    width: auto;
    height: auto;
    pointer-events: auto;
    /* Tıklanabilir */
    user-select: none;
    /* Seçilemez */
}

/* 5. Zoom Butonları (Sağ Alt Köşe) */
.zoom-controls {
    position: absolute;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 20;
    background: rgba(255, 255, 255, 0.9);
    padding: 8px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(4px);
}

.zoom-controls button {
    width: 36px;
    height: 36px;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 6px;
    color: #333;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.zoom-controls button:hover {
    background: #479483;
    color: #fff;
    border-color: #479483;
}

/* 6. Fancybox Reset (Paddingleri sıfırla) */
.astro-fancybox-fullscreen .fancybox__content {
    padding: 0 !important;
    background: transparent !important;
    max-width: 95vw !important;
    width: 1000px !important;
    /* Maksimum genişlik */
    height: auto !important;
    border-radius: 12px;
    overflow: hidden;
}

@media (max-width: 768px) {
    .astro-modal-wrapper {
        height: 85vh;
        /* Mobilde biraz daha kısa */
    }

    .zoom-controls {
        bottom: 10px;
        right: 10px;
    }
}




.chart-meta .meta-sub {
    font-size: 11px;
    color: rgba(0, 0, 0, .55);
    line-height: 1.25;
}


/* Mobilde pinch/pan için şart */
.astro-fancybox-fullscreen .panzoom-container {
    touch-action: none;
    /* iOS/Android: pinch & pan eventleri bize gelsin */
    overscroll-behavior: contain;
}

/* Modern Modal */
.modal-modern .modal-content {
    border: 0;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .20);
}

.modal-modern .modal-header {
    border: 0;
    padding: 18px 20px;
    background: linear-gradient(135deg, var(--astro-sage) 0%, #ffffff 100%);
}

.modal-modern .modal-title {
    font-weight: 800;
    letter-spacing: .2px;
}

.modal-modern .modal-subtitle {
    font-size: 12px;
    opacity: .75;
    margin-top: 2px;
}

.modal-modern .btn-close {
    filter: grayscale(1);
    opacity: .65;
}

.modal-modern .btn-close:hover {
    opacity: 1;
}

.picker-card {
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 16px;
    padding: 14px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .06);
}

.picker-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.picker-person {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
}

.picker-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(0, 0, 0, .04);
    flex: 0 0 auto;
}

.picker-badge {
    font-size: 11px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .04);
    border: 1px solid rgba(0, 0, 0, .06);
    color: rgba(0, 0, 0, .70);
    white-space: nowrap;
}

.form-select.modern,
.form-control.modern {
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, .10);
    padding: 10px 12px;
    box-shadow: none;
}

.form-select.modern:focus,
.form-control.modern:focus {
    border-color: rgba(30, 136, 229, .55);
    box-shadow: 0 0 0 .2rem rgba(30, 136, 229, .15);
}

.picker-help {
    border: 1px dashed rgba(0, 0, 0, .12);
    background: rgba(0, 0, 0, .02);
    border-radius: 14px;
    padding: 10px 12px;
    font-size: 12px;
    color: rgba(0, 0, 0, .70);
}

.modal-modern .modal-footer {
    border: 0;
    padding: 14px 18px 18px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .02) 100%);
}


.btn-apply {
    border-radius: 12px;
    padding: 10px 16px;
    font-weight: 800;
    box-shadow: 0 12px 26px rgba(13, 110, 253, .25);
}

/* mobilde daha ferah */
@media (max-width: 575.98px) {
    .modal-modern .modal-header {
        padding: 16px;
    }

    .picker-card {
        padding: 12px;
    }
}

.chart-picker-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.btn-chart-picker {
    display: inline-flex;
    align-items: center;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(0, 0, 0, .10);
    background: linear-gradient(180deg, #ffffff 0%, rgba(0, 0, 0, .02) 100%);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .06);
    color: #0d6efd;
    font-weight: 800;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.btn-chart-picker:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .10);
    border-color: rgba(13, 110, 253, .25);
    color: #0b5ed7;
}

.btn-chart-picker:active {
    transform: translateY(0);
    box-shadow: 0 8px 18px rgba(0, 0, 0, .08);
}



.btn-chart-picker .label {
    line-height: 1.05;
    display: flex;
    flex-direction: column;
}

.btn-chart-picker .label small {
    font-size: 11px;
    font-weight: 700;
    opacity: .65;
    margin-top: 2px;
}

.btn-chart-picker .chev {
    margin-left: 6px;
    opacity: .55;
}

/* Mobilde tam genişlik */
@media (max-width: 575.98px) {
    .btn-chart-picker {
        width: 100%;
        justify-content: space-between;
    }
}

/* =============== Minimal Transit Stepper =============== */
.transit-stepper {
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 8px;
    width: 100%;
}

/* ok butonları - Eski header stili */
.transit-stepper .ts-btn {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 6px;
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    color: #475569;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s ease;
    cursor: pointer;
}

.transit-stepper .ts-btn:hover {
    background: #2f8f7a;
    color: #fff;
    border-color: #2f8f7a;
    transform: translateY(-1px);
}

.transit-stepper .ts-btn:active {
    transform: translateY(0);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, .1);
}

/* orta alan daha kompakt */
.transit-stepper .ts-mid {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

/* tarih + saat yan yana */
.transit-stepper .ts-datetime {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* label daha minimal */
.transit-stepper .ts-label {
    font-size: 11px;
    color: #6b7280;
    margin: 0;
    /* ✅ margin yok */
    line-height: 1.1;
    opacity: .9;
}

/* tarih seçici - Eski header stili */
.transit-stepper .ts-date {
    border-radius: 6px;
    border: 1px solid #cbd5e1;
    padding: 8px 12px;
    background: #fff;
    font-size: 13px;
    font-weight: 500;
    box-shadow: none;
    min-width: 140px;
    flex: 1;
    transition: all 0.2s ease;
}

.transit-stepper .ts-date:focus {
    box-shadow: 0 0 0 3px rgba(47, 143, 122, .1);
    border-color: #2f8f7a;
    outline: none;
}

/* saat seçici - Eski header stili */
.transit-stepper .ts-time {
    border-radius: 6px;
    border: 1px solid #cbd5e1;
    padding: 8px 12px;
    background: #fff;
    font-size: 13px;
    font-weight: 500;
    box-shadow: none;
    min-width: 100px;
    flex: 0.8;
    transition: all 0.2s ease;
}

.transit-stepper .ts-time:focus {
    box-shadow: 0 0 0 3px rgba(47, 143, 122, .1);
    border-color: #2f8f7a;
    outline: none;
}

/* select - Eski header stili */
.transit-stepper .ts-select {
    border-radius: 6px;
    border: 1px solid #cbd5e1;
    padding: 8px 12px;
    background: #fff;
    font-size: 13px;
    font-weight: 500;
    box-shadow: none;
    flex: 1;
    min-width: 110px;
    transition: all 0.2s ease;
}

.transit-stepper .ts-select:focus {
    box-shadow: 0 0 0 3px rgba(47, 143, 122, .1);
    border-color: #2f8f7a;
    outline: none;
}

/* current: küçük “mono” ama daha hafif */
.transit-stepper .ts-current {
    font-size: 11px;
    color: #4b5563;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    margin: 0;
    opacity: .9;
}

/* Mobil: tek satır, select daralsın */
@media (max-width:576px) {
    .transit-stepper {
        width: 100%;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 8px;
    }

    .transit-stepper .ts-mid {
        min-width: 0;
        flex: 1 1 100%;
        width: 100%;
    }

    .transit-stepper .ts-datetime {
        width: 100%;
    }

    .transit-stepper .ts-date,
    .transit-stepper .ts-time,
    .transit-stepper .ts-select {
        flex: 1;
        min-width: 0;
    }
}

/* =============== House System - Eski header stili =============== */
.house-system-wrap {
    min-width: 0 !important;
    width: 180px;
}

.house-system-select {
    width: 180px;
    padding: 9px 12px !important;
    padding-right: 32px !important;
    white-space: nowrap;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    font-weight: 600;
    background: #fff;
    transition: all 0.2s ease;
}

.house-system-select:hover {
    border-color: #2f8f7a;
    box-shadow: 0 3px 10px rgba(47, 143, 122, .15);
}

.house-system-select:focus {
    border-color: #2f8f7a;
    box-shadow: 0 0 0 3px rgba(47, 143, 122, .1);
    outline: none;
}

/* Responsive width */
@media (max-width: 1200px) {

    .house-system-wrap,
    .house-system-select {
        width: 160px;
    }
}

@media (max-width: 992px) {

    .house-system-wrap,
    .house-system-select {
        width: 150px;
    }
}

@media (max-width: 576px) {
    .house-system-wrap {
        flex: 1 1 180px;
    }

    .house-system-select {
        width: 100%;
    }
}



.panel-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    flex-wrap: wrap;
    min-width: 0;
}

.panel-tabs {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding-bottom: 2px;
    margin: 0;
    min-width: 0;
    flex: 1 1 auto;
}

.panel-tab {
    border: 1px solid rgba(2, 6, 23, .10);
    background: rgba(255, 255, 255, .8);
    color: #334155;
    border-radius: 999px;
    padding: 8px 12px;
    font-weight: 700;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    transition: all .12s ease;
}

@media (max-width: 575.98px) {
    .panel-header__inner {
        gap: 8px;
        padding: 8px 0;
    }

    .panel-tabs {
        gap: 4px;
    }

    .panel-tab {
        padding: 6px 8px;
        font-size: 12px;
        gap: 4px;
    }

    .panel-tab i {
        font-size: 12px;
    }
}

.panel-tab:hover {
    transform: translateY(1px);
    border-color: rgba(2, 6, 23, .16);
    color: #0f172a;
}

.panel-tab.active,
.panel-tab[aria-selected="true"] {
    background: linear-gradient(135deg, rgba(16, 185, 129, .16), rgba(59, 130, 246, .10));
    border-color: rgba(16, 185, 129, .35);
    color: #0f172a;
}

.panel-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.panel-actions .btn {
    font-weight: 700;
}

.bg-red-one {
    background-color: #800E13;
    color: #FFFFFF;
}

.bg-red-one:hover {
    border-color: #800E13;
    color: #800E13;
}

.bg-red-two {
    background-color: #C84153;
    color: #FFFFFF;
}

.bg-red-two:hover {
    border-color: #C84153;
    color: #C84153;
}

.bg-green-one {
    background-color: #2f8f7a;
    color: #FFFFFF;
}

.bg-green-one:hover {
    border-color: #2f8f7a;
    color: #2f8f7a;
}

.page-head {
    background: linear-gradient(135deg, rgba(15, 23, 42, .06), rgba(16, 185, 129, .06));
    border: 1px solid rgba(2, 6, 23, .08);
    border-radius: 16px;
    padding: 18px 18px;
}

.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 18px;
    margin-bottom: 10px;
}

.section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    letter-spacing: -.2px;
}

.section-title i {
    opacity: .85;
}

.section-sub {
    color: #6b7280;
    font-size: 12px;
    margin-top: 2px;
}

.chip-group {
    flex-wrap: wrap;
    min-width: 0;
}

.chip-group .btn {
    border-radius: 999px;
    padding: 6px 12px;
    font-weight: 600;
}

@media (max-width: 575.98px) {
    .chip-group .btn {
        padding: 5px 10px;
        font-size: 0.875rem;
    }

    .chip-group .btn i {
        font-size: 0.8em;
    }
}

.mychart-card {
    border-radius: 16px;
    border: 1px solid rgba(2, 6, 23, .08);
    box-shadow: 0 6px 18px rgba(2, 6, 23, .06);
    transition: transform .12s ease, box-shadow .12s ease;
}

.mychart-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(2, 6, 23, .10);
}

.rel-card {
    border-style: dashed !important;
    border-width: 2px !important;
    background: linear-gradient(180deg, rgba(245, 158, 11, .06), rgba(16, 185, 129, .04));
}

.mini-meta {
    font-size: 12px;
    color: #6b7280;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.mini-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(2, 6, 23, .04);
    border: 1px solid rgba(2, 6, 23, .06);
}

.ab-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

.ab-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 10px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .7);
    border: 1px solid rgba(2, 6, 23, .06);
}

.ab-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.ab-pill {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    color: #111827;
}

.ab-pill.a {
    background: rgba(59, 130, 246, .15);
    border: 1px solid rgba(59, 130, 246, .25);
}

.ab-pill.b {
    background: rgba(239, 68, 68, .12);
    border: 1px solid rgba(239, 68, 68, .22);
}

.ab-name {
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ab-city {
    color: #6b7280;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    position: relative;
    z-index: 10;
}

.btn-icon {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
}

/* --- Chart Meta Overlay Düzenlemesi --- */

/* Kapsayıcı (Dropzone) referans noktası olsun */
#mainDropzone {
    position: relative;
    /* İçindeki absolute elemanlar buna göre hizalanır */
    /* overflow: hidden;  Kartın dışına taşan kısımları kırp */
}

/* --- Chart Meta Overlay (Bootstrap ile) --- */

/* --- SAĞ PANEL EŞİTLEME VE SABİT TAB --- */

/* 1. Sağdaki Kolonun Kendisi */
.right-panel-column {
    display: flex;
    flex-direction: column;
}

/* 2. Sağdaki Kart: Flex düzen, yükseklik JS ile kontrol edilir */
.right-panel-card {
    display: flex !important;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: visible;
    padding-bottom: 0 !important;
    border-radius: 14px;
}

/* Badge: sağ panel kartında normal flow'da, kartın üst kenarına hizalı */
.right-panel-card>.chart-badge {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    flex: 0 0 auto;
    align-self: center;
    margin: -17px auto 4px;
    z-index: 10;
}

/* 3. Ortadaki İçerik Alanı (Kaydırılabilir Kısım) */
.right-panel-scroll-area {
    display: flex;
    flex-direction: column;
    scrollbar-width: thin;
    scrollbar-color: rgba(47, 143, 122, 0.3) transparent;
}

.right-panel-scroll-area::-webkit-scrollbar {
    width: 3px;
}

.right-panel-scroll-area::-webkit-scrollbar-track {
    background: transparent;
}

.right-panel-scroll-area::-webkit-scrollbar-thumb {
    background: rgba(47, 143, 122, 0.25);
    border-radius: 999px;
    transition: background 0.2s;
}

.right-panel-scroll-area::-webkit-scrollbar-thumb:hover {
    background: rgba(47, 143, 122, 0.45);
}

/* 4. En Alttaki Tab Menüsü (Sabit) */
.right-tabs-bar {
    flex: 0 0 auto;
    position: relative;
    background: #fff;
}

/* ===== Elementler kartı (görseldeki stile yakın) ===== */
.elements-card {
    position: relative;
    background: #fff;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, .08);
    /* box-shadow: 0 6px 16px rgba(0, 0, 0, .05); */
    padding: 12px 10px 8px;
    overflow: visible;
    height: 135px;
}

/* Ay Fazı kartı: yazılar kutu içinde kalsın */
.moon-phase-box {
    padding: 0 6px;
    min-width: 0;
    overflow: hidden;
}

.moon-phase-visual {
    margin-bottom: 2px !important;
}

.moon-phase-svg {
    width: 56px;
    height: 56px;
}

.moon-phase-title {
    font-size: 11px;
    line-height: 1.2;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    max-width: 100%;
}

.moon-phase-desc {
    font-size: 10px;
    line-height: 1.2;
    margin-top: 2px !important;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    max-width: 100%;
}

.moon-phase-box .small {
    font-size: 10px;
    line-height: 1.2;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    max-width: 100%;
    margin-bottom: 1px !important;
}

/* üstte yeşil kurdele */
.elements-ribbon {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #479483;
    color: #fff;
    font-weight: 800;
    font-size: 13px;
    padding: 7px 26px;
    border-radius: 8px;
    line-height: 1;
    box-shadow: 0 10px 18px rgba(0, 0, 0, .12);
    white-space: nowrap;
}

/* içerik */
.elements-body {
    padding-top: 4px;
}

.elements-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0;
}

.elements-label {
    width: 64px;
    font-size: 12px;
    font-weight: 700;
    color: #24303a;
}

.elements-bar {
    flex: 1;
    height: 6px;
    /* görselde ince */
    border-radius: 999px;
    background: rgba(20, 20, 20, .12);
    overflow: hidden;
}

.elements-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
}

.elements-val {
    width: 22px;
    /* görselde sağda küçük sayı */
    text-align: right;
    font-size: 12px;
    font-weight: 800;
    color: #24303a;
}

/* alttaki mini donut */
.elements-mini {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.elements-wheel {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    position: relative;
    border: 2px solid rgba(0, 0, 0, .12);
}

.elements-wheel-center {
    position: absolute;
    inset: 8px;
    background: #fff;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, .10);
}

/* =============== Vertical Stat Charts (up-down bars) =============== */
.vchart {
    display: grid;
    gap: 10px;
    margin-top: 6px;
}

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

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

.vchart.cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

.vchart.cols-7 {
    grid-template-columns: repeat(7, 1fr);
}

.vchart-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    width: 100%;
}

.vchart-val {
    font-size: 10px;
    font-weight: 900;
    color: #0f172a;
    line-height: 1;
    margin-bottom: 2px;
}

.vchart-wrap {
    width: 14%;
    height: 64px;
    border-radius: 10px;
    background: rgba(15, 23, 42, .08);
    border: 1px solid rgba(15, 23, 42, .08);
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}

.vchart-bar {
    width: 100%;
    border-radius: 100px 100px 0 0;
    display: block;
}

.vchart-lab {
    font-size: 11px;
    font-weight: 800;
    color: #334155;
    text-align: center;
    line-height: 1.05;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vchart-sub {
    font-size: 10px;
    font-weight: 800;
    color: #64748b;
    line-height: 1;
}

/* Çakra etiketleri daha uzun olabiliyor */
.vchart.cols-7 .vchart-lab {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    font-size: 10px;
}

/* Pair view üst-alt blok başlık */
.pair-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 14px;
    background: rgba(15, 23, 42, .04);
    border: 1px solid rgba(15, 23, 42, .06);
}

.pair-head .dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    display: inline-block;
}

.pair-head .name {
    font-weight: 900;
    font-size: 12px;
    color: #0f172a;
}

.mini-box {
    background: rgba(15, 23, 42, .03);
    border: 1px solid rgba(15, 23, 42, .06);
    border-radius: 10px;
    padding: 6px;
    height: 100%;
}

.mini-section-title {
    display: flex;
    align-items: center;
    font-weight: 900;
    font-size: 12px;
    color: #0f172a;
    margin-bottom: 6px;
    opacity: .9;
}

.vchart-ico {
    width: 26px;
    height: 26px;
    object-fit: contain;
    margin-bottom: 2px;
    margin-top: 6px;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .12));
}

/* .vchart-wrap::after {
    content: "";
    position: absolute;
    left: -10px;
    right: -10px;
    bottom: -6px;
    height: 2px;
    background: rgba(15, 23, 42, .18);
    border-radius: 2px;
} */

/* Sağ kolon, içindeki kartı aşağı kadar itebilsin */
.right-panel-column {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    /* bootstrap row içinde tam yüksekliğe yay */
}

/* ==============================
   RIGHT PANEL: TAB İÇERİĞİ FULL HEIGHT
   ============================== */

/* tab-content tüm yüksekliği alsın */
#rightTabsContent {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* aktif tab-pane de tüm yüksekliği alsın */
#rightTabsContent>.tab-pane {
    flex: 1 1 auto;
    min-height: 0;
}

/* Tab pane içindeki table-responsive taşmasın */
#rightTabsContent .table-responsive {
    overflow: auto;
    max-width: 100%;
}

/* ==============================
   İÇ SEVİYE SEKMELERİ (Konumlar içindeki Natal/Ev/Asteroid/Transit)
   ============================== */
.right-panel-scroll-area .nav.right-tabs-bar,
ul[id^="planetTabs"] {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 4px !important;
    margin-bottom: 0.5rem !important;
    padding-bottom: 2px;
}

.right-panel-scroll-area .nav.right-tabs-bar::-webkit-scrollbar,
ul[id^="planetTabs"]::-webkit-scrollbar {
    display: none;
}

.right-panel-scroll-area .nav.right-tabs-bar>.nav-item,
ul[id^="planetTabs"]>.nav-item {
    flex: 0 0 auto !important;
}

.right-panel-scroll-area .nav.right-tabs-bar .nav-link,
ul[id^="planetTabs"] .nav-link {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 7px;
    white-space: nowrap !important;
    line-height: 1.3;
}

.right-panel-scroll-area .nav.right-tabs-bar .nav-link .badge,
ul[id^="planetTabs"] .nav-link .badge {
    font-size: 0.58rem;
    font-weight: 600;
    padding: 2px 5px;
    vertical-align: middle;
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    line-height: 1.2;
}

/* Sabit Yıldızlar Bar (scroll dışında, tab bar üstünde) */
.fixed-stars-bar {
    flex: 0 0 auto;
    padding: 6px 8px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    background: linear-gradient(180deg, rgba(79, 70, 229, 0.02) 0%, rgba(255, 255, 255, 0) 100%);
}

.fixed-stars-bar-header {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 4px;
    font-size: 0.68rem;
    font-weight: 600;
    color: #6b7280;
    letter-spacing: 0.3px;
}

.fixed-stars-bar-header i {
    color: #4f46e5;
    font-size: 0.72rem;
}

.fixed-star-row {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 0;
    font-size: 0.72rem;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fixed-star-row-name {
    font-weight: 600;
    color: #4f46e5;
}

.fixed-star-row-arrow {
    color: #9ca3af;
    font-size: 0.6rem;
}

.fixed-star-row-planet {
    font-weight: 500;
    color: #374151;
}

.fixed-star-row-orb {
    color: #6b7280;
    font-size: 0.65rem;
    font-family: monospace;
    margin-left: auto;
}

.fixed-stars-more {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: 10px;
    background: rgba(79, 70, 229, 0.08);
    color: #4f46e5;
    font-size: 0.65rem;
    font-weight: 600;
    margin-top: 2px;
}

/* Kartın iç gövdesi de uzayıp içerik alanını doldursun */
#tab-aspect .aspect-body {
    flex: 1 1 auto;
    min-height: 0;
    align-items: stretch;
}

/* --- Birebir Resimdeki Ribbon Tasarımı (Düzeltilmiş) --- */

.chart-badge {
    position: absolute;
    /* Kartın biraz üstüne çıkarak "asılı" durmasını sağlar */
    top: -6px;
    left: 50%;
    transform: translateX(-50%);

    /* Ana Yeşil Renk (Resimdeki ton) */
    background-color: #479483;
    color: #fff;
    /* Genişlik ve Dolgunluk */
    padding: 3px 32px;
    /* Köşeleri hafif yuvarla */
    border-radius: 4px;
    /* Yazı Stili */
    font-family: 'Segoe UI', sans-serif;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.3px;
    line-height: 1;
    white-space: nowrap;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
    /* Önde durması için */
    z-index: 10;
    /* Hafif gölge */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
}

/* --- SOL ve SAĞ KIVRIMLAR (Koyu Üçgenler) --- */
/* Bu parçalar kurdelenin arkaya kıvrılan kısımlarıdır */

.chart-badge::before,
.chart-badge::after {
    content: "";
    position: absolute;
    /* Kıvrım noktası: Etiketin alt hizasından başlar */
    top: 100%;
    border-style: solid;
    z-index: -1;
    /* Etiketin arkasında kalır */
}

/* SOL KIVRIM */
.chart-badge::before {
    left: 6px;
    /* Hafif içeriden başlar */
    /* Üçgen boyutu ve yönü (Sola ve yukarı bakan dik üçgen) */
    border-width: 0 8px 8px 0;
    /* Sadece sağ tarafı boya (Koyu yeşil), diğerleri şeffaf */
    border-color: transparent #2a665a transparent transparent;
}

/* SAĞ KIVRIM */
.chart-badge::after {
    right: 6px;
    /* Hafif içeriden başlar */
    /* Üçgen boyutu ve yönü (Sağa ve yukarı bakan dik üçgen) */
    border-width: 0 0 8px 8px;
    /* Sadece sol tarafı boya (Koyu yeşil) */
    border-color: transparent transparent transparent #2a665a;
}

/* Elementler kartı küçük badge */
.elements-card>.chart-badge {
    font-size: 9px;
    padding: 3px 18px;
    top: -8px;
}

/* ====== PANEL HEADER (Üst Bar) ====== */

.panel-header-wrapper {
    position: relative;
    z-index: 1040;
}

.panel-header-container {
    padding-left: 1rem;
    padding-right: 1rem;
    max-width: 100%;
}

@media (min-width: 768px) {
    .panel-header-container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

/* Tablo sticky thead – sadece tablo içinde üstte kalsın, header dropdown'un altında */
.panel-table-thead {
    z-index: 2;
}

/* Ana satır: logo + toolbar + expand + avatar – kompakt (tüm butonlar tek satıra sığar) */
.top-actions {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 48px;
}

@media (min-width: 768px) {
    .top-actions {
        gap: 0.6rem;
        min-height: 48px;
    }
}

/* Logo - Eski header'daki gibi daha büyük */
.panel-logo-area {
    flex-shrink: 0;
    margin-right: 0.5rem;
}

.panel-logo-link {
    display: flex;
    align-items: center;
    transition: opacity 0.2s ease;
}

.panel-logo-link:hover {
    opacity: 0.85;
}

.panel-logo-img {
    height: 44px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
    display: block;
}

@media (min-width: 768px) {
    .panel-logo-img {
        height: 50px;
        max-width: 140px;
    }
}

@media (min-width: 992px) {
    .panel-logo-img {
        height: 55px;
        max-width: 160px;
    }
}

/* Orta alan: toolbar (kaydırılabilir / genişletilebilir) */
.top-actions .flex-grow-1 {
    min-width: 0;
}

/* Toolbar: scroll yok; dar ekranda chevron ile açılır */
.dynamic-toolbar {
    height: auto;
    min-height: 48px;
    max-height: 48px;
    flex-wrap: nowrap;
    overflow: hidden;
    align-items: center;
    gap: 0.4rem;
    transition: max-height 0.3s ease;
}

@media (min-width: 768px) {
    .dynamic-toolbar {
        gap: 0.45rem;
    }
}

/* Geniş ekranda tüm butonlar sığar, chevron gizli */
@media (min-width: 1200px) {
    .dynamic-toolbar {
        max-height: 500px;
    }

    #expandToolbarBtn,
    .expand-toolbar-btn {
        display: none !important;
    }
}

/* Dar ekranda chevron butonu görünsün (tıklanınca diğer butonlar açılır) */
@media (max-width: 1199.98px) {

    #expandToolbarBtn,
    .expand-toolbar-btn {
        display: inline-flex !important;
    }
}

.dynamic-toolbar.is-expanded {
    max-height: 1000px !important;
    flex-wrap: wrap !important;
    overflow: visible !important;
    transition: max-height 0.3s ease;
}

.expand-toolbar-btn {
    width: 34px;
    height: 34px;
    border-radius: 6px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #64748b;
    transition: all 0.2s ease;
    cursor: pointer;
}

.expand-toolbar-btn:hover {
    background: #f8fafc;
    color: #2f8f7a;
    border-color: #2f8f7a;
    transform: translateY(-1px);
}

.expand-toolbar-btn.bg-light-secondary {
    background: #e2e8f0;
    border-color: #94a3b8;
    color: #334155;
}

.expand-toolbar-btn i {
    transition: transform 0.3s ease;
}

.expand-toolbar-btn.is-expanded .expand-toolbar-chevron {
    transform: rotate(180deg);
}

/* Avatar alanı */
.panel-header-avatar {
    flex-shrink: 0;
    margin-left: 0.25rem;
}

@media (min-width: 768px) {
    .panel-header-avatar {
        margin-left: 0.5rem;
    }
}

/* Toolbar içi buton/select hizalama */
.dynamic-toolbar .btn,
.dynamic-toolbar .form-select,
.dynamic-toolbar .house-system-wrap .form-select {
    white-space: nowrap;
}

body.panel-page {
    padding-top: var(--panelHeaderH, 72px);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Ana içerik alanı kalan yüksekliği doldurur, footer en alta iner */
.panel-page-main {
    flex: 1 0 auto;
}

/* Panel sayfasında footer her zaman viewport en altında */
body.panel-page .content-footer.footer {
    flex-shrink: 0;
    margin-top: auto;
}

@media (max-width: 991px) {
    body.panel-page {
        padding-top: 68px;
    }
}

@media (max-width: 576px) {
    body.panel-page {
        padding-top: 60px;
    }
}

.form-card.panel-header {
    margin-bottom: 0 !important;
}

/* ====== Panel header ====== */
.panel-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1040;
    background-color: rgba(255, 255, 255, 0.95) !important;
    border-bottom: 1px solid #dbdade;
    box-shadow: 0 1px 0 #dbdade;
}

.panel-header-inner {
    margin-bottom: 0 !important;
    padding: 0.25rem 0 0.2rem 0;
    border-radius: 0;
    box-shadow: none;
}

@media (min-width: 768px) {
    .panel-header-inner {
        padding-top: 0.35rem;
        padding-bottom: 0.35rem;
    }
}





/* Toolbar butonları – eski sitedeki btn-main-green stili (açık yeşil arka plan, yeşil yazı) + kompakt boyut */
.dynamic-toolbar .btn-soft,
.dynamic-toolbar .btn-color-three,
.dynamic-toolbar .btn-outline-primary,
.dynamic-toolbar .btn-outline-warning,
.dynamic-toolbar .btn-outline-dark,
.dynamic-toolbar .btn-soft-two {
    height: 34px;
    min-height: 34px;
    padding: 6px 12px;
    font-size: 0.8125rem;
    font-weight: 600;
    border-radius: 6px;
    color: #2f8f7a;
    border-color: transparent;
    background: rgba(47, 143, 122, 0.18);
    box-shadow: none;
}

.dynamic-toolbar .btn-soft i,
.dynamic-toolbar .btn-color-three i,
.dynamic-toolbar .btn-outline-primary i,
.dynamic-toolbar .btn-outline-warning i,
.dynamic-toolbar .btn-outline-dark i,
.dynamic-toolbar .btn-soft-two i {
    font-size: 0.75rem;
}

.dynamic-toolbar .btn-soft:hover,
.dynamic-toolbar .btn-color-three:hover,
.dynamic-toolbar .btn-outline-primary:hover,
.dynamic-toolbar .btn-outline-warning:hover,
.dynamic-toolbar .btn-outline-dark:hover,
.dynamic-toolbar .btn-soft-two:hover {
    color: #fff;
    border-color: transparent;
    background: #2f8f7a;
    box-shadow: none;
    transform: none;
}

.dynamic-toolbar .btn-soft:focus,
.dynamic-toolbar .btn-color-three:focus,
.dynamic-toolbar .btn-outline-primary:focus,
.dynamic-toolbar .btn-outline-warning:focus,
.dynamic-toolbar .btn-outline-dark:focus,
.dynamic-toolbar .btn-soft-two:focus {
    color: #2f8f7a;
    background: rgba(47, 143, 122, 0.18);
    border-color: transparent;
}

.dynamic-toolbar .btn-soft:focus:hover,
.dynamic-toolbar .btn-color-three:focus:hover,
.dynamic-toolbar .btn-outline-primary:focus:hover,
.dynamic-toolbar .btn-outline-warning:focus:hover,
.dynamic-toolbar .btn-outline-dark:focus:hover,
.dynamic-toolbar .btn-soft-two:focus:hover {
    color: #fff;
    background: #2f8f7a;
}

/* Expand butonu – eski navbar toggler stili */
.expand-toolbar-btn {
    border: 1px solid rgba(93, 89, 108, 0.075);
    background: #fff;
    color: #6f6b7d;
}

.expand-toolbar-btn:hover {
    background: #f8f7fa;
    color: #5d596c;
    border-color: rgba(93, 89, 108, 0.12);
}

/* Logo alanı – eski sitedeki genişlik (120px) */
.panel-header-inner .panel-logo-img {
    max-width: 120px;
}

/* Dark theme – eski site navbar temasına uyum */
[data-theme="dark"] .panel-header {
    background-color: rgba(30, 41, 59, 0.95) !important;
    border-bottom-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .expand-toolbar-btn {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(51, 65, 85, 0.6);
    color: #94a3b8;
}

[data-theme="dark"] .expand-toolbar-btn:hover {
    background: rgba(51, 65, 85, 0.9);
    color: #cbd5e1;
}

/* ====== TOOLBAR (dynamicToolbar) responsive ====== */
@media (max-width: 991px) {
    .dynamic-toolbar {
        height: 52px;
    }

    #expandToolbarBtn.expand-toolbar-btn.toolbar-mobile {
        display: none !important;
    }

    .panel-logo-img {
        height: 42px;
    }

    .top-actions {
        flex-wrap: nowrap;
        min-height: 52px;
    }

    .top-actions .house-system-wrap,
    .top-actions .transit-stepper {
        display: none;
    }
}

@media (max-width: 576px) {
    .dynamic-toolbar {
        height: 48px;
    }

    .panel-logo-img {
        height: 38px;
    }

    .top-actions {
        min-height: 48px;
    }

    .top-actions .btn,
    .top-actions .house-system-wrap .form-select {
        padding: 8px 10px;
        font-size: 13px;
    }

    .panel-header-container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
}

/* ====== KİŞİ DETAY TAB'LARI (İlişki/Çoklu) ====== */
.person-detail-section {
    margin-top: 0;
    overflow: hidden;
    contain: layout style;
}



.person-detail-tabs {
    display: flex;
    gap: 8px;
    padding-bottom: 4px;
    margin: 0;
    list-style: none;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    flex-wrap: wrap;
    justify-content: flex-start;
}

.person-detail-tabs .nav-item {
    margin: 0;
}

.person-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 14px;
    border: 2px solid transparent;
    background: rgba(0, 0, 0, .06);
    color: #334155;
    cursor: pointer;
    transition: all 0.2s ease;
}

.person-tab-btn:hover {
    background: rgba(0, 0, 0, .08);
    color: #0f172a;
}

.person-tab-btn.active {
    background: #2f8f7a !important;
    border-color: #2f8f7a !important;
    color: #0f172a;
}

.person-tab-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.person-tab-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}

.person-detail-pane {
    display: block;
}

.person-detail-pane.d-none {
    display: none !important;
}

@media (max-width: 768px) {
    .person-tab-btn {
        padding: 8px 12px;
        font-size: 13px;
    }

    .person-tab-name {
        max-width: 100px;
    }
}

/* Natal tablo - Ev sütunu görünümü */
.house-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, .12);
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
    line-height: 1;
    white-space: nowrap;
}

.house-pill .house-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 12px;
    background: rgba(71, 148, 131, .12);
    /* senin yeşile uyum */
    color: #2d6f63;
}

.house-pill .house-label {
    font-weight: 700;
    font-size: 12px;
    color: #556;
    opacity: .9;
}

.house-pill--empty {
    padding: 6px 12px;
    color: #777;
    background: #fafafa;
    box-shadow: none;
}

/* Traditional moddaki tick çizgilerini incelt */
.traditional-tick {
    stroke-width: 0.5px !important;
    /* Normalde 1px veya 2px ise daha ince yap */
    opacity: 0.8;
}

/* Çakra: sol görsel + sağ chart */
.chakra-layout {
    display: flex;
    /* gap: 14px; */
    align-items: stretch;
}

.chakra-side {
    flex: 0 0 110px;
    /* sol sabit genişlik */
    display: flex;
    align-items: center;
    justify-content: center;
}

.chakra-img {
    width: 100%;
    max-width: 110px;
    height: 130px;
    border-radius: 10px;
    object-fit: cover;
    display: block;
}

.chakra-main {
    flex: 1;
    min-width: 0;
}

/* Chart'ı sola doğru eğ */
.chakra-tilt {
    transform: skewX(-12deg);
    /* sola yatıklık */
    transform-origin: left center;
}

/* Yazıları düz tut (chart eğik ama text okunaklı kalsın) */
.chakra-tilt .vchart-val,
.chakra-tilt .vchart-lab,
.chakra-tilt .vchart-sub {
    transform: skewX(12deg);
}

/* Mobilde alt alta gelsin ve eğimi azalt */
@media (max-width: 768px) {
    .chakra-layout {
        flex-direction: column;
    }

    .chakra-side {
        flex: 0 0 auto;
    }

    .chakra-img {
        max-width: 220px;
    }

    .chakra-tilt {
        transform: skewX(-6deg);
    }

    .chakra-tilt .vchart-val,
    .chakra-tilt .vchart-lab,
    .chakra-tilt .vchart-sub {
        transform: skewX(6deg);
    }
}

/* SAĞ tarafta basit yatık bar listesi */
.chakra-bars {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 2px 0;
}

/* her satır */
.chakra-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* barın arka zemini */
.chakra-track {
    position: relative;
    flex: 1;
    height: 14px;
    background: rgba(15, 23, 42, .10);
    border: 1px solid rgba(15, 23, 42, .10);
    overflow: hidden;

    /* ✅ sadece sağ taraf radius */
    border-radius: 0 12px 12px 0;
    /* sol üst 0, sağ üst 999, sağ alt 999, sol alt 0 */
}

/* SOLA doğru uzayan bar:
   width % kadar olur ama RIGHT:0 verip sola doğru uzatır */
.chakra-bar {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    border-radius: 0 12px 12px 0;
}

/* sağda değer küçük göster */
.chakra-val {
    text-align: right;
    font-weight: 900;
    font-size: 10px;
    color: #0f172a;
}

/* tüm bar grubunu sola eğ */
.chakra-tilt {
    transform: skewX(0deg);
    transform-origin: left center;
}

/* değer yazısı düz kalsın */
.chakra-tilt .chakra-val {
    transform: skewX(0deg);
}

/* mobilde eğimi azalt */
@media (max-width: 768px) {
    .chakra-tilt {
        transform: skewX(-6deg);
    }

    .chakra-tilt .chakra-val {
        transform: skewX(6deg);
    }
}


.aspect-card {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.aspect-header {

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

.aspect-body {
    padding: 12px;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow-x: auto;
}

/* Tablo */
table.fit-aspect-table {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
    max-width: 520px;
    /* kart içinde çok büyümesin */
}

/* Hücreler */
td.cell-aspect {
    border: 1px solid #eee;
    background: #fff;
    text-align: center;
    vertical-align: middle;
    padding: 0;
    aspect-ratio: 1 / 1;
}

td.cell-diag {
    border: none !important;
    background: transparent;
    text-align: left;
    vertical-align: middle;
    padding-left: 6px;
    aspect-ratio: 1 / 1;
    white-space: nowrap;
}

/* Gezegen glyph */
.planet-glyph {
    font-family: 'HamburgSymbols';
    color: #0d6efd;
    font-size: 14px;
    line-height: 1;
    display: inline-block;
    transform: translateY(1px);
}

/* ASC/MC için normal metin */
.planet-text {
    font-family: inherit;
    color: #0d6efd;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    display: inline-block;
}

/* Aspect glyph */
.asp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    line-height: 1;
    font-family: 'HamburgSymbols';
    font-size: 14px;
}

.asp svg {
    width: 14px;
    height: 14px;
}

/* Majör aspect karakterleri */
.asp-0::before {
    content: "\0071";
}

/* q */
.asp-30::before {
    content: "\0069";
}

/* i */
.asp-60::before {
    content: "\0074";
}

/* t */
.asp-90::before {
    content: "\0072";
}

/* r */
.asp-120::before {
    content: "\0065";
}

/* e */
.asp-180::before {
    content: "\0077";
}

/* w */

/* Renkler */
.asp-60::before,
.asp-120::before {
    color: #0d6efd;
}

.asp-90::before,
.asp-180::before {
    color: #dc3545;
}

.asp-0::before {
    color: #212529;
}

.asp-30::before {
    color: #198754;
}

/* PAR / CPAR */
.asp-par,
.asp-cpar {
    font-family: system-ui, Arial, sans-serif !important;
    font-weight: 800;
    font-size: 13px;
    line-height: 1;
}

.asp-par {
    color: #111;
}

.asp-cpar {
    color: #dc3545;
}

/* küçük ekranlarda biraz küçült */
@media (max-width: 420px) {
    table.fit-aspect-table {
        max-width: 100%;
    }

    .planet-glyph {
        font-size: 13px;
    }

    .asp {
        width: 16px;
        height: 16px;
        font-size: 16px;
    }
}

/* ✅ Tab butonları (Bootstrap tab-content yok, tasarım bozulmaz) */
.ag-tabs {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    flex-wrap: nowrap;
}

.ag-tab-btn {
    border: 1px solid rgba(15, 23, 42, .10);
    background: #2f8f7a;
    font-weight: 800;
    font-size: 12px;
    padding: 8px 10px;
    color: #fff;
    border-radius: 10px;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.ag-tab-btn.active {
    background: #1f6f5e;
    color: #fff;
}

/* ✅ Pane: aspect-body merkezleme mantığını bozma */
.ag-pane {
    width: 100%;
    display: flex;
    justify-content: center;
}

/* Liste tablosu: kendi scroll'u yok, parent scroll area yönetir */
.ag-pairs-scroll {
    overflow: visible;
    border: 1px solid #eee;
    border-radius: 12px;
    background: #fff;
}

/* Liste thead: parent scroll area'ya göre sticky */
.ag-pairs-scroll thead th {

    top: 0;
    z-index: 3;
    background: #f8f9fa;
    box-shadow: 0 1px 0 #eee;
}



.syn-table-wrap {
    overflow-x: auto;
    border: 1px solid #e0e0e0;
    border-radius: 15px;
    background: #fff;
    margin-top: 30px;
}

.syn-table {
    border-collapse: collapse;
    font-size: 11px;
    width: 100%;
}

/* HEADER (B Kişisi - Üst) */
.syn-col-head {
    text-align: center;
    border-bottom: 2px solid #ccc;
    border-left: 1px solid #eee;
    padding: 4px 2px;
    background: #f9f9f9;
    vertical-align: bottom;
    height: 60px;
}

.syn-col-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}

/* ROWS (A Kişisi - Sol) */
.syn-row-head {
    border-right: 2px solid #ccc;
    border-bottom: 1px solid #eee;
    padding: 4px 8px;
    background: #f9f9f9;
    white-space: nowrap;
    text-align: left;
}

.syn-row-content {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* CELLS (Açılar) */
.syn-cell {
    border: 1px solid #e0e0e0;
    width: 32px;
    height: 32px;
    text-align: center;
    vertical-align: middle;
    padding: 0;
}

.f-astro {
    font-family: 'HamburgSymbols', sans-serif;
    line-height: 1;
    display: inline-block;
}

.txt-deg {
    font-size: 10px;
    color: #666;
    font-family: monospace;
    line-height: 1.1;
}

.self-intersect {
    background-color: rgba(0, 0, 0, 0.03);
}

/* Aspect Glyph Stilleri (Diğer tablodan alınanlar) */
.asp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    line-height: 1;
    font-family: 'HamburgSymbols';
    font-size: 18px;
}

.asp-0::before {
    content: "\0071";
}

.asp-30::before {
    content: "\0069";
}

.asp-45::before {
    content: "\0069";
}

/* 45 fontta yoksa fallback */
.asp-60::before {
    content: "\0074";
}

.asp-90::before {
    content: "\0072";
}

.asp-120::before {
    content: "\0065";
}

.asp-135::before {
    content: "\0072";
}

/* 135 fallback */
.asp-150::before {
    content: "\0072";
}

/* 150 fallback */
.asp-180::before {
    content: "\0077";
}

.asp-par,
.asp-cpar {
    font-family: system-ui, Arial, sans-serif !important;
    font-weight: 800;
    font-size: 13px;
}


.f-astro {
    font-family: 'HamburgSymbols', sans-serif;
    line-height: 1;
    display: inline-block;
}

/* Hücre İçi Yapı */
.planet-cell-content {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 100%;
    white-space: nowrap;
}

/* 1. Gezegen (Sola bakıyor - Sağa dayalı) */
.planet-cell-content.left-side {
    flex-direction: row;
    /* justify-content: flex-end; */
    /* İçerik sağa yaslansın */
}

/* 2. Gezegen (Sağa bakıyor - Sola dayalı) */
.planet-cell-content.right-side {
    flex-direction: row;
    justify-content: flex-start;
    /* İçerik sola yaslansın */
}

/* Bilgi Kutucukları */
.info-house {
    font-size: 10px;
    color: #999;
    font-weight: 700;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    padding: 2px 4px;
    min-width: 22px;
    text-align: center;
    line-height: 1;
}

.info-sign {
    font-size: 14px;
    width: 16px;
    text-align: center;
}

.info-planet {
    font-size: 19px;
    width: 22px;
    text-align: center;
}

/* Detay Metinleri (İsim ve Derece) */
.planet-details {
    display: flex;
    line-height: 1.1;
}

.detail-name {
    font-size: 11px;
    font-weight: 600;
    color: #333;
}

.detail-deg {
    font-size: 10px;
    color: #777;
    font-family: monospace;
}

/* Açı Kutusu (En Sağda) */
.aspect-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-right: 10px;
    justify-content: flex-end;
}

.aspect-info {
    display: flex;
    align-items: flex-end;
    line-height: 1.1;
}

/* Tablo genel ayarları */
.ag-pairs-table {
    width: 100%;
    table-layout: auto;
}

.ag-pairs-table .ag-col-planet {
    width: 38%;
}

.ag-pairs-table .ag-col-aspect {
    width: 24%;
}

.compare-box {
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    padding: 12px;
    height: 100%;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.compare-box:hover {
    border-color: #e0e0e0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

/* Üst tarafa renkli çizgi */
.compare-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--box-color, #ccc);
}

.compare-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px dashed #eee;
}

.compare-name {
    font-size: 0.85rem;
    font-weight: 700;
    color: #444;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.compare-badge {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--bg-soft);
    color: var(--text-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800;
}

/* Modalın Bootstrap standartlarını korumasını sağla */
#chartPickerModal .modal-dialog {
    max-width: 800px;
    z-index: 1060;
}

/* Picker kartlarının hizalanması */
.picker-card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 16px;
    padding: 20px;
    height: 100%;
    /* Kartların boyunu eşitle */
}

/* Mobilde modalın tam ekran olmasını sağla */
@media (max-width: 576px) {
    #chartPickerModal.modal-fullscreen-sm-down .modal-content {
        height: auto;
        min-height: 100%;
    }
}

.firdaria-compare__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid rgba(0, 0, 0, .08);
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .06);
    margin-bottom: 12px;
}

.firdaria-compare__person {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.firdaria-compare__person .name {
    font-weight: 800;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.firdaria-compare__vs {
    flex: 0 0 auto;
    font-weight: 900;
    font-size: 11px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #f3f5f7;
    border: 1px solid rgba(0, 0, 0, .08);
    color: #333;
}

.firdaria-compare .dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    display: inline-block;
    box-shadow: 0 0 0 4px rgba(0, 0, 0, .04);
}

.firdaria-card {
    height: 100%;
    border: 1px solid rgba(0, 0, 0, .08);
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 22px rgba(0, 0, 0, .06);
}

.firdaria-card__head {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: linear-gradient(90deg, rgba(0, 0, 0, .03), rgba(0, 0, 0, 0));
    border-bottom: 1px solid rgba(0, 0, 0, .06);
}

.firdaria-card__head .title {
    font-weight: 800;
    font-size: 12px;
    color: #222;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.firdaria-card__body {
    max-height: 720px;
    /* ihtiyaca göre 600-900 */
    overflow: auto;
    padding: 10px;
}

/* mobilde üst bar daha kompakt */
@media (max-width: 576px) {
    .firdaria-compare__top {
        border-radius: 12px;
    }

    .firdaria-compare__vs {
        padding: 5px 8px;
    }
}

/* Ortak compare blok */
.compare-block__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid rgba(0, 0, 0, .08);
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .06);
    margin-bottom: 12px;
}

.compare-block__person {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.compare-block__person .name {
    font-weight: 800;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.compare-block__vs {
    flex: 0 0 auto;
    font-weight: 900;
    font-size: 11px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #f3f5f7;
    border: 1px solid rgba(0, 0, 0, .08);
    color: #333;
}

.compare-block .dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    display: inline-block;
    box-shadow: 0 0 0 4px rgba(0, 0, 0, .04);
}

/* Kart */
.compare-card {
    height: 100%;
    border: 1px solid rgba(0, 0, 0, .08);
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 22px rgba(0, 0, 0, .06);
}

.compare-card__head {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: linear-gradient(90deg, rgba(0, 0, 0, .03), rgba(0, 0, 0, 0));
    border-bottom: 1px solid rgba(0, 0, 0, .06);
}

.compare-card__head .title {
    font-weight: 800;
    font-size: 12px;
    color: #222;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.compare-card__body {
    max-height: 520px;
    /* strong-planets genelde kısa; istersen artır */
    overflow: auto;
    padding: 10px;
}

.preview-save-float {
    position: fixed;
    left: 16px;
    bottom: 16px;
    top: auto;
    transform: none;
    z-index: 1200;
    display: flex;
    align-items: center;
    gap: 10px;
}


/* butonun “floating” hali */
.btn-save-float {
    border-radius: 999px;
    padding: 12px 16px;
    box-shadow: 0 14px 36px rgba(0, 0, 0, .14);
    border: 1px solid rgba(22, 163, 74, .25);
}

/* küçük bilgi etiketi */
.preview-save-hint {
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, .08);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .10);
    font-weight: 700;
    font-size: 12px;
    color: #166534;
    white-space: nowrap;
    opacity: .95;
}

.preview-save-hint i {
    color: #16a34a;
}

/* Mobilde sol sabit yerine altta “mini” gibi dursun */
@media (max-width: 576px) {
    .preview-save-float {
        left: 12px;
        top: auto;
        bottom: 14px;
        transform: none;
    }

    .btn-save-float {
        padding: 12px 14px;
        /* sadece ikon gibi */
    }
}

.astro-modal__dropzone {
    max-width: 980px;
    margin: 0 auto;
}

#panzoomContainer {
    width: 100%;
    height: calc(100vh - 180px);
    /* header+footer payı gibi */
    overflow: hidden;
}

#panzoomContainer svg {
    display: block;
}

.stellium-badge {
    background: rgba(var(--bs-emphasis-color-rgb), 0.05);
    padding: 8px 12px;
    border-radius: 8px;
    min-width: 140px;
}

.stellium-badge .s-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: bold;
    font-size: 13px;
    margin-bottom: 4px;
}

.stellium-badge .s-sym {
    font-size: 20px;
}

.stellium-badge .s-planets {
    display: flex;
    gap: 5px;
    font-family: 'HamburgSymbols';
    font-size: 16px;
    color: var(--bs-secondary-color);
}

.btn-horary {
    background-color: #2f8f7a;
    border-color: #2f8f7a;
    color: #FFFFFF;
}

.btn-horary:hover {
    background-color: #1f6f5e;
    color: #FFFFFF;
    border-color: #1f6f5e;
}

/* ====== DOMINANT PLANETS (Baskın Gezegenler) ====== */
.dominant-planets-wrap {
    padding: 12px;
    /* max-height: 730px; */
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, .12) transparent;
}

.dominant-podium {
    display: flex;
    align-items: flex-end;
    /* Kartları alt hizaya sabitler */
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
    padding-bottom: 10px;
}

.dominant-podium-card {
    background: #fff;
    border-radius: 12px;
    padding: 15px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    flex: 1;
    position: relative;
    transition: transform 0.3s ease;
    border: 1px solid #eee;
}

/* Yükseklik Ayarları */
.rank-1 {
    height: 170px;
    /* En uzun */
    z-index: 3;
    border-top: 5px solid var(--rank-color);
}

.rank-2 {
    height: 140px;
    /* Orta */
    z-index: 2;
    opacity: 0.9;
}

.rank-3 {
    height: 140px;
    /* En kısa */
    z-index: 1;
    opacity: 0.85;
}

/* İkon Boyutları */
.rank-1 .dp-planet-icon {
    font-size: 32px;
}

.rank-2 .dp-planet-icon {
    font-size: 26px;
}

.rank-3 .dp-planet-icon {
    font-size: 22px;
}

.dp-rank {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    padding: 2px 12px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 0.8rem;
}

.dp-name {
    font-weight: 700;
    font-size: 0.9rem;
    margin-top: 5px;
}

.dp-score {
    font-size: 1.1rem;
    font-weight: 800;
    color: #444;
}

.dominant-planets-wrap::-webkit-scrollbar {
    width: 5px;
}

.dominant-planets-wrap::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, .12);
    border-radius: 999px;
}

.dominant-planets-wrap::-webkit-scrollbar-track {
    background: transparent;
}

/* Pair modunda dış scroll container */
.dp-pair-scroll {
    max-height: 500px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, .12) transparent;
}

.dp-pair-scroll::-webkit-scrollbar {
    width: 5px;
}

.dp-pair-scroll::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, .12);
    border-radius: 999px;
}

/* Pair modunda iç wrap daha kısa (compare-box içinde) */
.compare-box .dominant-planets-wrap {
    max-height: 320px;
}

/* Podium: İlk 3 gezegen */
.dominant-podium {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
}

.dominant-podium-card {
    flex: 1;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 14px;
    padding: 14px 10px 12px;
    text-align: center;
    position: relative;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
    transition: transform 0.2s, box-shadow 0.2s;
}

.dominant-podium-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .08);
}

.dominant-podium-card:first-child {
    border-top: 3px solid var(--rank-color, #D4AF37);
}

.dominant-podium-card:nth-child(2) {
    border-top: 3px solid var(--rank-color, #A0A0A0);
}

.dominant-podium-card:nth-child(3) {
    border-top: 3px solid var(--rank-color, #CD7F32);
}

.dp-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    color: #fff;
    font-weight: 800;
    font-size: 12px;
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
}

.dp-planet-icon {
    margin: 6px 0 4px;
    line-height: 1;
}

.dp-name {
    font-weight: 700;
    font-size: 14px;
    color: #0f172a;
    margin-bottom: 2px;
}

.dp-score {
    font-weight: 800;
    font-size: 18px;
    color: var(--planet-color, #2f8f7a);
}

.dp-score small {
    font-weight: 500;
    font-size: 11px;
    color: #94a3b8;
}

.dp-sign-house {
    display: flex;
    gap: 4px;
    justify-content: center;
    margin-top: 4px;
}

/* Breakdown mini bar */
.dp-bar {
    display: flex;
    height: 5px;
    border-radius: 999px;
    overflow: hidden;
    background: #f1f5f9;
}

.dp-bar-seg {
    height: 100%;
    transition: width 0.3s;
}

.dp-legend {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 4px;
    flex-wrap: wrap;
}

.dp-legend span {
    font-size: 10px;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 3px;
}

.dp-legend i {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 2px;
}

/* Detay notu */
.dp-top-detail {
    text-align: center;
    padding: 8px;
    background: #fefce8;
    border-radius: 10px;
    border: 1px solid #fef08a;
}

/* Kalan gezegenler listesi */
.dp-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dp-list-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: #fafbfc;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, .05);
}

.dp-list-rank {
    font-weight: 700;
    font-size: 12px;
    color: #94a3b8;
    min-width: 20px;
    text-align: center;
}

.dp-list-name {
    font-weight: 600;
    font-size: 13px;
    color: #334155;
    min-width: 55px;
}

.dp-list-bar {
    flex: 1;
}

.dp-list-score {
    font-weight: 700;
    font-size: 13px;
    color: #475569;
    min-width: 28px;
    text-align: right;
}

.dp-note {
    text-align: center;
}

/* Responsive */
@media (max-width: 576px) {
    .dominant-podium {
        flex-direction: column;
        gap: 8px;
    }

    .dominant-podium-card {
        flex-direction: row;
        display: flex;
        align-items: center;
        gap: 12px;
        text-align: left;
        padding: 10px 14px;
    }

    .dp-rank {
        position: static;
        transform: none;
    }

    .dp-planet-icon {
        margin: 0;
    }

    .dp-breakdown {
        display: none;
    }

    .dp-sign-house {
        justify-content: flex-start;
    }
}


/* ============================================================
   HARITALAR OFFCANVAS DRAWER
   ============================================================ */

.charts-drawer {
    width: 17% !important;
    max-width: 90vw;
    border-left: 1px solid rgba(0, 0, 0, .08);
    box-shadow: -10px 0 40px rgba(0, 0, 0, .12);
    font-size: 13px;
}

.charts-drawer .px-3 {
    padding-left: 12px !important;
    padding-right: 12px !important;
}

.charts-drawer .form-control-sm,
.charts-drawer .form-select-sm,
.charts-drawer .btn-sm {
    font-size: 11px;
    padding: 4px 8px;
}

.charts-drawer .transit-stepper {
    gap: 6px;
}

.charts-drawer .transit-stepper .ts-btn {
    width: 28px;
    height: 28px;
    font-size: 10px;
    border-radius: 5px;
}

.charts-drawer .transit-stepper .ts-datetime {
    gap: 4px;
    flex-wrap: wrap;
}

.charts-drawer .transit-stepper .ts-date,
.charts-drawer .transit-stepper .ts-time,
.charts-drawer .transit-stepper .ts-select {
    padding: 4px 6px;
    font-size: 11px;
    min-width: 0;
    flex: 1 1 auto;
}

.charts-drawer .transit-stepper .ts-date {
    flex: 1 1 100%;
}

.charts-drawer .transit-stepper .ts-time {
    flex: 1 1 45%;
}

.charts-drawer .transit-stepper .ts-select {
    flex: 1 1 45%;
}

.charts-drawer .charts-drawer-hint small {
    font-size: 11px;
}

.charts-drawer .row.g-2 {
    --bs-gutter-x: 0.3rem;
    --bs-gutter-y: 0.3rem;
}

.charts-drawer #chartComboOverrideDate,
.charts-drawer #chartComboOverrideTime,
.charts-drawer #chartComboOverridePlace {
    font-size: 10px;
    padding: 3px 5px;
    height: 26px;
}

.charts-drawer #btnDrawerApplyChart {
    font-size: 10px;
    padding: 3px 5px;
    height: 26px;
}

.charts-drawer #btnDrawerApplyChart .me-1 {
    margin-right: 2px !important;
}

.charts-drawer-header {
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    background: linear-gradient(180deg, #fff, #fafbfc);
    padding: 12px 14px;
}

.charts-drawer-header .offcanvas-title {
    font-size: 13px;
    letter-spacing: -.2px;
}

/* Harita Kombinasyonları CTA — şık kart buton */
.chart-combo-cta {
    background: linear-gradient(135deg, rgba(34, 139, 114, 0.08) 0%, rgba(34, 139, 114, 0.04) 100%);
    border: 1px solid rgba(34, 139, 114, 0.2) !important;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.chart-combo-cta:hover {
    background: linear-gradient(135deg, rgba(34, 139, 114, 0.14) 0%, rgba(34, 139, 114, 0.08) 100%);
    border-color: rgba(34, 139, 114, 0.35) !important;
    box-shadow: 0 4px 14px rgba(34, 139, 114, 0.15);
    transform: translateY(-1px);
}

.chart-combo-cta:active {
    transform: translateY(0);
}

.chart-combo-cta__icon {
    width: 36px;
    height: 36px;
    background: linear-gradient(145deg, #228b72, #1f6f5e);
    color: #fff;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.chart-combo-cta__title {
    font-size: 0.82rem;
    letter-spacing: -0.02em;
    line-height: 1.25;
}

.chart-combo-cta__subtitle {
    font-size: 0.7rem;
    margin-top: 2px;
    display: block;
}

.chart-combo-cta__arrow {
    font-size: 0.75rem;
    opacity: 0.8;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.chart-combo-cta:hover .chart-combo-cta__arrow {
    transform: translateX(3px);
}

[data-theme="dark"] .chart-combo-cta {
    background: linear-gradient(135deg, rgba(34, 139, 114, 0.18) 0%, rgba(34, 139, 114, 0.08) 100%);
    border-color: rgba(34, 139, 114, 0.35) !important;
}

[data-theme="dark"] .chart-combo-cta:hover {
    background: linear-gradient(135deg, rgba(34, 139, 114, 0.25) 0%, rgba(34, 139, 114, 0.12) 100%);
    border-color: rgba(34, 139, 114, 0.5) !important;
    box-shadow: 0 4px 14px rgba(34, 139, 114, 0.2);
}

[data-theme="dark"] .chart-combo-cta__title {
    color: rgba(255, 255, 255, 0.95);
}

[data-theme="dark"] .chart-combo-cta__subtitle {
    color: rgba(255, 255, 255, 0.6);
}

/* Harita Türü Seçici */
.charts-drawer-type {
    border-bottom: 1px solid rgba(0, 0, 0, .06);
    background: rgba(0, 0, 0, .02);
}

.charts-drawer-type .form-label {
    color: #475569;
    font-size: 11px;
}

.charts-drawer-type .form-select-sm {
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
}

/* Yükleniyor */
.charts-drawer-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    color: #475569;
}

/* Harita Listesi */
.charts-drawer-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding-top: 10px;
}

/* Her bir harita kartı */
.chart-drawer-card {
    position: relative;
    width: 100%;
    min-height: 120px;
    box-sizing: border-box;
    background: #fff;
    border-radius: 12px;
    border: 2px solid transparent;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
    overflow: visible;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    display: flex;
    flex-direction: column;
}

.chart-drawer-card-inner {
    padding: 9px 6px 6px;
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.chart-drawer-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .12);
    border-color: rgba(47, 148, 131, .20);
}

.chart-drawer-card.active {
    border-color: #479483;
    box-shadow: 0 8px 24px rgba(71, 148, 131, .18);
}

.chart-drawer-card.active::after {
    content: '';
    position: absolute;
    top: 6px;
    right: 6px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #479483;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
    z-index: 5;
}

.chart-drawer-card.dragging {
    opacity: 0.5;
    transform: scale(0.95);
}

/* Kart içi badge */
.chart-drawer-card .chart-badge {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 8px;
    padding: 2px 10px;
    border-radius: 3px;
    z-index: 4;
    white-space: nowrap;
}

/* Kart içi SVG */
.chart-drawer-card .thumb-svg {
    padding-top: 4px;
}

.chart-drawer-card .thumb-svg svg {
    width: 100%;
    height: auto;
}

/* Sürükle ikonu */
.chart-drawer-card .drag-handle {
    position: absolute;
    right: 4px;
    bottom: 4px;
    font-size: 10px;
    color: #94a3b8;
    opacity: 0;
    transition: opacity .15s ease;
    z-index: 3;
    background: none;
    padding: 2px 4px;
    border-radius: 6px;
}

.chart-drawer-card:hover .drag-handle {
    opacity: 0.6;
}

/* Bilgi notu */
.charts-drawer-hint {
    border-bottom: 1px solid rgba(0, 0, 0, .04);
}

/* Placeholder kart (henüz yüklenmemiş harita türleri) */
.chart-drawer-placeholder {
    width: 100%;
    box-sizing: border-box;
    border: 2px dashed rgba(0, 0, 0, .12);
    background: rgba(0, 0, 0, .02);
    cursor: pointer;
}

.chart-drawer-placeholder:hover {
    border-color: rgba(47, 148, 131, .40);
    background: rgba(47, 148, 131, .04);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(47, 148, 131, .12);
}

.chart-drawer-placeholder-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    height: 100%;
    gap: 6px;
    padding: 12px 8px;
}

.chart-drawer-placeholder .chart-drawer-icon {
    font-size: 22px;
    color: #94a3b8;
    transition: color .15s ease;
}

.chart-drawer-placeholder:hover .chart-drawer-icon {
    color: #479483;
}

.chart-drawer-placeholder .chart-load-hint {
    font-size: 9px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: .4px;
    transition: color .15s ease;
}

.chart-drawer-placeholder:hover .chart-load-hint {
    color: #479483;
}

/* Modal açan kartlar (Horary gibi) - mor vurgu */
.chart-drawer-modal-card {
    border-color: rgba(139, 92, 246, .18);
    background: rgba(139, 92, 246, .03);
}

.chart-drawer-modal-card:hover {
    border-color: rgba(139, 92, 246, .45);
    background: rgba(139, 92, 246, .06);
    box-shadow: 0 8px 24px rgba(139, 92, 246, .12);
}

.chart-drawer-modal-card .chart-drawer-icon {
    color: #8b5cf6;
}

.chart-drawer-modal-card:hover .chart-drawer-icon {
    color: #7c3aed;
}

.chart-drawer-modal-card .chart-load-hint {
    color: #8b5cf6;
}

.chart-drawer-modal-card:hover .chart-load-hint {
    color: #7c3aed;
}

.chart-drawer-modal-card .chart-badge {
    background: rgba(139, 92, 246, .12);
    color: #5b21b6;
}

.chart-drawer-placeholder .chart-badge {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    font-size: 9px;
    padding: 2px 10px;
    border-radius: 6px;
    background: rgba(47, 148, 131, .10);
    color: #334155;
    font-weight: 700;
}

/* Boş durum */
.charts-drawer-empty {
    color: #64748b;
}

/* Mobilde offcanvas daha dar */
@media (max-width: 576px) {
    .charts-drawer {
        width: 100% !important;
        max-width: 100vw;
    }

    .charts-drawer-list {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .chart-drawer-card-inner {
        padding: 8px 5px 5px;
    }

    .chart-drawer-card .chart-badge {
        font-size: 7px;
        padding: 2px 8px;
    }

    .chart-drawer-placeholder-inner {
        min-height: 100px;
    }
}


/* ============================================================
   MOBİL RESPONSIVE  (< 768px)
   Masaüstü (≥768px) görünümüne kesinlikle dokunmaz.
   ============================================================ */

/* ------ Stats Toggle Butonu (sadece mobilde görünür, d-md-none) ------ */
.btn-stats-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 16px;
    border-radius: 14px;
    border: 1px solid rgba(15, 23, 42, .10);
    background: linear-gradient(135deg, rgba(47, 143, 122, .06), rgba(255, 255, 255, 1));
    color: #334155;
    font-weight: 700;
    font-size: 14px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .05);
    transition: all .2s ease;
}

.btn-stats-toggle:hover,
.btn-stats-toggle:focus {
    background: linear-gradient(135deg, rgba(47, 143, 122, .12), rgba(255, 255, 255, 1));
    border-color: rgba(47, 143, 122, .25);
    color: #0f172a;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
}

.btn-stats-toggle .stats-toggle-text {
    display: flex;
    align-items: center;
}

.btn-stats-toggle .stats-toggle-icon {
    transition: transform .25s ease;
    font-size: 12px;
    opacity: .6;
}

/* Açıkken ok yukarı dönsün */
.btn-stats-toggle[aria-expanded="true"] .stats-toggle-icon {
    transform: rotate(180deg);
}

.btn-stats-toggle[aria-expanded="true"] {
    background: linear-gradient(135deg, rgba(47, 143, 122, .14), rgba(255, 255, 255, 1));
    border-color: rgba(47, 143, 122, .30);
}

/* Sağ Panel Toggle Butonu (Mobil) */
.btn-right-panel-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 16px;
    border-radius: 14px;
    border: 1px solid rgba(15, 23, 42, .10);
    background: linear-gradient(135deg, rgba(47, 143, 122, .06), rgba(255, 255, 255, 1));
    color: #334155;
    font-weight: 700;
    font-size: 14px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .05);
    transition: all .2s ease;
}

.btn-right-panel-toggle:hover,
.btn-right-panel-toggle:focus {
    background: linear-gradient(135deg, rgba(47, 143, 122, .12), rgba(255, 255, 255, 1));
    border-color: rgba(47, 143, 122, .25);
    color: #0f172a;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
}

.btn-right-panel-toggle .right-panel-toggle-text {
    display: flex;
    align-items: center;
    flex: 1;
}

.btn-right-panel-toggle .right-panel-toggle-icon {
    transition: transform .25s ease;
    font-size: 12px;
    opacity: .6;
    flex-shrink: 0;
}

/* Açıkken ok yukarı dönsün */
.btn-right-panel-toggle[aria-expanded="true"] .right-panel-toggle-icon {
    transform: rotate(180deg);
}

.btn-right-panel-toggle[aria-expanded="true"] {
    background: linear-gradient(135deg, rgba(47, 143, 122, .14), rgba(255, 255, 255, 1));
    border-color: rgba(47, 143, 122, .30);
}

/* ------ MOBİL GENEL (< 768px) ------ */
@media (max-width: 767.98px) {

    /* Genel container boşlukları */
    .container-fluid.mb-2 {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .container-fluid.mb-2>.row.g-4 {
        --bs-gutter-y: 0.75rem;
        --bs-gutter-x: 0.5rem;
    }






    .chart-badge {
        font-size: 10px;
        padding: 3px 22px;
        top: -8px;
    }

    .chart-badge::before {
        border-width: 0 6px 6px 0;
    }

    .chart-badge::after {
        border-width: 0 0 6px 6px;
    }

    /* Sağ panel: Mobilde doğal yükseklik */
    .right-panel-card {
        height: auto !important;
        max-height: none;
        min-height: auto;
        padding: 10px 10px 0;
        border-radius: 12px;
    }

    /* Mobilde collapse kapalıyken panel minimal olsun - beyaz arka plan kaldır */
    .right-panel-card:has(#rightPanelCollapseArea:not(.show)) {
        min-height: auto;
        padding: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        border-radius: 0;
    }

    /* Mobilde collapse açıkken normal görünüm */
    .right-panel-card:has(#rightPanelCollapseArea.show) {
        padding: 10px 10px 0 !important;
        background: #fff !important;
        border-radius: 12px;
    }

    /* Collapse açıkken buton kartın içinde, alt boşluk ekle */
    .right-panel-card:has(#rightPanelCollapseArea.show) .btn-right-panel-toggle {
        margin-bottom: 0.75rem;
    }

    .right-panel-scroll-area {
        max-height: 55vh;
        min-height: 200px;
        padding-right: 2px;
    }

    /* Mobilde collapse kapalıyken scroll area'yı gizle */
    #rightPanelCollapseArea:not(.show) .right-panel-scroll-area {
        display: none;
    }

    /* Mobilde collapse area içindeki içerik için üst boşluk */
    #rightPanelCollapseArea {
        padding-top: 0.5rem;
        transition: all 0.3s ease;
    }

    /* Collapse animasyonu */
    #rightPanelCollapseArea.collapsing {
        transition: height 0.35s ease;
    }



    /* Mobilde collapse açıkken tab bar görünsün */
    .right-panel-card #rightPanelCollapseArea.show~.right-tabs-bar {
        display: block;
    }

    /* Mobilde collapse kapalıyken tab bar gizli olsun */
    .right-panel-card #rightPanelCollapseArea:not(.show)~.right-tabs-bar {
        display: none;
    }

    .right-tabs-bar .nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        justify-content: flex-start !important;
        gap: 4px !important;
        padding: 0 4px 2px;
    }

    .right-tabs-bar .nav::-webkit-scrollbar {
        display: none;
    }

    .right-tabs-bar .nav-link {
        flex-shrink: 0;
        white-space: nowrap;
        font-size: 11px;
        padding: 7px 10px;
        border-radius: 8px;
    }

    /* Stats bölümü (collapse içinde) */
    .person-detail-section {
        margin-top: 0.5rem;
    }

    .person-detail-section .row.mt-2>.col-md-3 {
        margin-bottom: 0.75rem;
    }

    .elements-card {
        height: auto;
        min-height: auto;
        padding: 10px 8px 6px;
    }

    #qualitiesPolarityCard {
        height: auto;
        min-height: auto;
    }

    /* vchart barları */
    .vchart-wrap {
        height: 52px;
        max-width: 30px;
    }

    .vchart-val {
        font-size: 9px;
    }

    .vchart-lab {
        font-size: 8px;
    }

    .vchart-sub {
        font-size: 9px;
    }

    .vchart-ico {
        width: 22px;
        height: 22px;
    }

    .vchart.cols-7 .vchart-lab {
        font-size: 8px;
    }

    /* Çakra */
    .chakra-layout {
        flex-direction: column;
        gap: 10px;
    }

    .chakra-side {
        flex: 0 0 auto;
    }

    .chakra-img {
        max-width: 100%;
        height: auto;
        max-height: 160px;
        margin: 0 auto;
        display: block;
    }

    .chakra-track {
        height: 16px;
    }

    .chakra-val {
        font-size: 11px;
    }

    .chakra-row {
        gap: 6px;
    }

    /* Mini box */
    .mini-box {
        padding: 8px;
        border-radius: 12px;
    }

    .mini-section-title {
        font-size: 11px;
    }

    /* Kişi seçim tabları */
    .person-detail-tabs {
        gap: 6px;
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 6px;
    }

    .person-detail-tabs::-webkit-scrollbar {
        display: none;
    }

    .person-tab-btn {
        padding: 7px 10px;
        font-size: 12px;
        flex-shrink: 0;
    }

    .person-tab-name {
        max-width: 90px;
    }

    /* Pair head */
    .pair-head {
        padding: 6px 8px;
        gap: 6px;
        border-radius: 10px;
    }

    .pair-head .name {
        font-size: 11px;
    }

    .pair-head .dot {
        width: 8px;
        height: 8px;
    }





    .ag-tabs {
        gap: 4px;
    }

    .ag-tab-btn {
        font-size: 11px;
        padding: 5px 8px;
    }

    /* Synastry tablo */
    .syn-table-wrap {
        margin-top: 16px;
        border-radius: 10px;
    }

    .syn-col-head {
        height: 48px;
        padding: 2px 1px;
    }

    .syn-cell {
        width: 28px;
        height: 28px;
    }

    .syn-table {
        font-size: 10px;
    }

    /* Firdaria compare */
    .firdaria-compare__top {
        flex-direction: column;
        gap: 6px;
        padding: 8px 10px;
        border-radius: 12px;
    }

    .firdaria-compare__person .name {
        font-size: 12px;
    }

    .firdaria-card__body {
        max-height: 400px;
        padding: 8px;
    }

    /* Compare blok */
    .compare-block__top {
        flex-direction: column;
        gap: 6px;
        padding: 8px 10px;
        border-radius: 12px;
    }

    .compare-card__body {
        max-height: 360px;
        padding: 8px;
    }

    .ag-pairs-scroll {
        border-radius: 10px;
    }

    /* Dominant planets */
    .dominant-planets-wrap {
        padding: 8px;
        max-height: 350px;
    }

    .dp-pair-scroll {
        max-height: 380px;
    }

    /* Elements bar */
    .elements-row {
        gap: 6px;
        margin: 6px 0;
    }

    .elements-label {
        width: 52px;
        font-size: 11px;
    }

    .elements-val {
        font-size: 11px;
        width: 20px;
    }

    .elements-bar {
        height: 5px;
    }

    .elements-ribbon {
        font-size: 11px;
        padding: 6px 18px;
        top: -10px;
    }
}

/* ------ MASAÜSTÜ (≥ 768px) ------ */
@media (min-width: 768px) {
    .btn-right-panel-toggle {
        display: none !important;
    }

    .right-panel-card .chart-badge {
        display: block !important;
    }

    .right-tabs-bar {
        display: block !important;
        margin-top: 20px;
    }

    .right-panel-card {
        background: #fff !important;
        padding: 14px !important;
        padding-top: 18px !important;
        overflow: visible;
        min-height: 0;
    }

    .right-panel-scroll-area {
        overflow-y: auto;
        overflow-x: hidden;
    }

    #rightPanelCollapseArea {
        display: flex !important;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
        padding-top: 0;
    }
}

/* ------ KÜÇÜK MOBİL (< 480px) ------ */
@media (max-width: 479.98px) {

    .dropzone {
        min-height: 240px;
        padding: 8px;
        border-radius: 10px;
    }

    .chart-badge {
        font-size: 9px;
        padding: 3px 16px;
        top: -7px;
    }

    .right-tabs-bar .nav-link {
        font-size: 10px;
        padding: 6px 8px;
        border-radius: 7px;
    }

    .right-panel-card {
        padding: 8px;
        border-radius: 10px;
        min-height: 280px;
    }

    .right-panel-scroll-area {
        max-height: 50vh;
    }

    .vchart-wrap {
        height: 44px;
        max-width: 24px;
    }

    .vchart-val {
        font-size: 8px;
    }

    .vchart-lab {
        font-size: 7px;
    }

    .vchart.cols-7 .vchart-lab {
        font-size: 7px;
    }

    .vchart-ico {
        width: 18px;
        height: 18px;
    }

    .asp {
        width: 14px;
        height: 14px;
        font-size: 14px;
    }

    .planet-glyph {
        font-size: 12px;
    }

    table.fit-aspect-table {
        max-width: 100%;
    }

    .syn-cell {
        width: 24px;
        height: 24px;
    }

    .syn-col-head {
        height: 40px;
    }



    .elements-label {
        width: 44px;
        font-size: 10px;
    }

    .elements-row {
        gap: 4px;
        margin: 4px 0;
    }

    .chakra-track {
        height: 14px;
    }

    .chakra-val {
        font-size: 10px;
    }

    .mini-box {
        padding: 6px;
    }

    /* Stats toggle buton daha kompakt */
    .btn-stats-toggle {
        padding: 10px 14px;
        font-size: 13px;
        border-radius: 12px;
    }

    .btn-right-panel-toggle {
        padding: 10px 14px;
        font-size: 13px;
        border-radius: 12px;
    }

    #mobileChartSelect {
        padding: 10px 40px 10px 14px;
        font-size: 13px;
        border-radius: 12px;
        background-size: auto, 18px;
        background-position: center, right 10px center;
    }
}

/* ------ MOBİL YATAY (Landscape <768px) ------ */
@media (max-width: 767.98px) and (orientation: landscape) {


    .right-panel-scroll-area {
        max-height: 45vh;
    }
}

/* ------ TOUCH CİHAZLAR ------ */
@media (hover: none) and (pointer: coarse) {
    .right-tabs-bar .nav-link {
        min-height: 36px;
        display: inline-flex;
        align-items: center;
    }

    .ag-tab-btn {
        min-height: 34px;
        display: inline-flex;
        align-items: center;
    }

    .person-tab-btn {
        min-height: 36px;
    }

    .btn-stats-toggle {
        min-height: 44px;
    }

    .btn-right-panel-toggle {
        min-height: 44px;
    }

    #mobileChartSelect {
        min-height: 44px;
    }

    .thumb-card:hover {
        transform: none;
        box-shadow: none;
    }

    .right-panel-scroll-area {
        scrollbar-width: none;
    }

    .right-panel-scroll-area::-webkit-scrollbar {
        display: none;
    }
}


/* ============================================================
   PANEL HEADER – MOBİL OPTİMİZASYON (≤ 767.98px)
   Masaüstü (≥768px) stillerine kesinlikle dokunmaz.
   ============================================================ */

@media (max-width: 767.98px) {

    /* ---------- Genel Header Kompaktlık ---------- */
    .panel-header-inner {
        padding: 0.35rem 0;
    }

    .top-actions {
        gap: 0.4rem;
        min-height: 44px;
        position: relative;
    }

    .panel-mobile-menu-wrap {
        gap: 0.45rem;
    }

    .panel-mobile-comment-btn {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
        height: 36px;
        padding: 0.35rem 0.7rem !important;
        border-radius: 999px !important;
        border-color: rgba(71, 148, 131, 0.24) !important;
        background: linear-gradient(180deg, rgba(71, 148, 131, 0.14), rgba(71, 148, 131, 0.09)) !important;
        color: #2f8f7a !important;
        font-size: 0.78rem;
        font-weight: 600;
        letter-spacing: 0.01em;
        white-space: nowrap;
        box-shadow: 0 4px 12px rgba(71, 148, 131, 0.16) !important;
        transition: all 0.2s ease;
    }

    .panel-mobile-comment-btn i {
        font-size: 0.8rem;
        margin-right: 0.3rem !important;
    }

    .panel-mobile-comment-btn:active {
        transform: translate(-50%, calc(-50% + 1px));
    }

    .panel-mobile-menu-btn {
        width: 36px;
        height: 36px;
        padding: 0 !important;
        border-radius: 11px !important;
        border-color: rgba(71, 148, 131, 0.24) !important;
        background: linear-gradient(180deg, rgba(71, 148, 131, 0.14), rgba(71, 148, 131, 0.09)) !important;
        color: #2f8f7a !important;
        box-shadow: 0 4px 10px rgba(71, 148, 131, 0.14) !important;
        transition: all 0.2s ease;
    }

    .panel-mobile-menu-btn i {
        font-size: 0.9rem;
        opacity: 0.92;
    }

    .panel-mobile-menu-icon {
        width: 15px;
        height: 11px;
        display: inline-flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .panel-mobile-menu-icon span {
        display: block;
        height: 2px;
        border-radius: 999px !important;
        background: currentColor;
        transform-origin: center;
        transition: transform 0.24s ease, opacity 0.2s ease, width 0.2s ease;
    }

    .panel-mobile-menu-icon span:nth-child(2) {
        width: 78%;
        margin-left: auto;
    }

    .panel-mobile-menu-btn.is-open .panel-mobile-menu-icon span:nth-child(1) {
        transform: translateY(4.5px) rotate(45deg);
    }

    .panel-mobile-menu-btn.is-open .panel-mobile-menu-icon span:nth-child(2) {
        opacity: 0;
        transform: scaleX(0.2);
    }

    .panel-mobile-menu-btn.is-open .panel-mobile-menu-icon span:nth-child(3) {
        transform: translateY(-4.5px) rotate(-45deg);
    }

    .panel-mobile-menu-btn:hover,
    .panel-mobile-menu-btn:focus {
        border-color: rgba(71, 148, 131, 0.36) !important;
        background: linear-gradient(180deg, rgba(71, 148, 131, 0.16), rgba(71, 148, 131, 0.11)) !important;
        color: #277665 !important;
    }

    .panel-mobile-menu-btn:active {
        transform: translateY(1px);
        box-shadow: 0 2px 6px rgba(71, 148, 131, 0.16) !important;
    }

    /* Mobilde logo biraz büyük */
    .panel-logo-img {
        height: 44px;
    }

    .panel-header-container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    /* Mobilde chevron (menü genişlet) butonu her zaman gizli */
    #expandToolbarBtn {
        display: none !important;
    }

    /* ---------- Toolbar Yükseklik ---------- */
    .dynamic-toolbar {
        height: 44px;
        max-height: 44px;
        gap: 5px !important;
        align-items: center;
    }

    /* ---------- KAPALI HAL: SADECE İKON ---------- */
    .dynamic-toolbar:not(.is-expanded) .btn {
        font-size: 0;
        line-height: 1;
        padding: 9px 10px;
        border-radius: 10px;
        min-width: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .dynamic-toolbar:not(.is-expanded) .btn>i,
    .dynamic-toolbar:not(.is-expanded) .btn>i.me-1 {
        font-size: 15px;
        margin: 0 !important;
        line-height: 1;
    }

    /* Kapalıyken chart-picker-bar gizle */
    .dynamic-toolbar:not(.is-expanded) .chart-picker-bar {
        display: none !important;
    }

    /* ---------- AÇIK HAL: TAM ETİKETLER ---------- */
    .dynamic-toolbar.is-expanded {
        gap: 8px !important;
        padding: 8px 0 12px;
        border-top: 1px solid rgba(15, 23, 42, 0.06);
    }

    .dynamic-toolbar.is-expanded .btn {
        font-size: 13px;
        line-height: normal;
        padding: 9px 14px;
        border-radius: 12px;
        min-width: auto;
    }

    .dynamic-toolbar.is-expanded .btn>i,
    .dynamic-toolbar.is-expanded .btn>i.me-1 {
        font-size: inherit;
        margin-right: 0.25rem !important;
    }

    /* Açıkken gizli elemanları göster */
    .dynamic-toolbar.is-expanded .house-system-wrap {
        display: flex !important;
        flex: 1 1 100%;
    }

    .dynamic-toolbar.is-expanded .house-system-select {
        width: 100% !important;
    }

    .dynamic-toolbar.is-expanded .transit-stepper {
        display: flex !important;
        width: 100%;
    }

    .dynamic-toolbar.is-expanded .chart-picker-bar {
        display: flex !important;
        width: 100%;
    }

    /* ---------- Expand Butonu ---------- */
    .expand-toolbar-btn {
        width: 36px;
        height: 36px;
        border-radius: 8px;
    }

    /* ---------- Avatar ---------- */
    .panel-header-avatar {
        margin-left: 0.15rem;
    }

    /* ---------- Body padding (kompakt header) ---------- */
    body.panel-page {
        padding-top: 72px;
    }

    /* ---------- Mobil soldan açılan sidebar (Bootstrap Offcanvas) ---------- */
    #panelMobileSidebar.offcanvas {
        max-width: 50%;
    }

    #panelMobileSidebar .panel-sidebar-logo {
        height: 36px;
        width: auto;
        max-width: 120px;
    }

    #panelMobileSidebar .panel-sidebar-tile {
        cursor: pointer;
        transition: background-color 0.15s ease, border-color 0.15s ease;
    }

    #panelMobileSidebar .panel-sidebar-tile:hover,
    #panelMobileSidebar .panel-sidebar-tile:focus {
        background-color: rgba(47, 143, 122, 0.08) !important;
        border-color: rgba(47, 143, 122, 0.3) !important;
    }

    /* Profilim: tüm yazılar mobilde okunaklı boyutta (küçük kalmasın) */
    #panelMobileSidebar .panel-sidebar-profile-block .panel-sidebar-profile-title {
        font-size: 0.8rem;
    }

    #panelMobileSidebar .panel-sidebar-profile-name {
        font-size: 1rem;
    }

    #panelMobileSidebar .panel-sidebar-profile-links a {
        font-size: 0.9375rem;
    }

    #panelMobileSidebar .panel-sidebar-avatar-initial {
        font-size: 0.9rem;
    }

    #panelMobileSidebar .list-group-item-action:hover,
    #panelMobileSidebar .list-group-item-action:focus {
        background-color: rgba(47, 143, 122, 0.08);
    }

    #panelMobileSidebar .list-group-item-action[aria-expanded="true"] .fa-chevron-down {
        transform: rotate(180deg);
    }

    #panelMobileSidebar .fa-chevron-down {
        transition: transform 0.2s ease;
    }
}

[data-theme="dark"] #panelMobileSidebar .offcanvas-header {
    background-color: rgba(30, 41, 59, 0.5);
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] #panelMobileSidebar .offcanvas-body>.bg-light.border-top {
    background-color: rgba(30, 41, 59, 0.4) !important;
    border-top-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] #panelMobileSidebar .list-group-item-action:hover,
[data-theme="dark"] #panelMobileSidebar .list-group-item-action:focus {
    background-color: rgba(47, 143, 122, 0.15);
}

/* ============================================================
   PANEL HEADER – ÇOK KÜÇÜK EKRANLAR (≤ 479.98px)
   ============================================================ */

@media (max-width: 479.98px) {

    .panel-logo-img {
        height: 38px;
    }

    .dynamic-toolbar {
        height: 30px;
    }

    .dynamic-toolbar:not(.is-expanded) .btn {
        padding: 7px 8px;
        min-width: 34px;
        border-radius: 8px;
    }

    .dynamic-toolbar:not(.is-expanded) .btn>i,
    .dynamic-toolbar:not(.is-expanded) .btn>i.me-1 {
        font-size: 14px;
    }

    .top-actions {
        gap: 0.25rem;
        min-height: 40px;
    }

    .expand-toolbar-btn {
        width: 32px;
        height: 32px;
        border-radius: 8px;
    }

}


/* ============================================================
   ÇAKRA KARTI – TABLET & MOBİL OPTİMİZASYON
   Masaüstü (≥992px) stillerine dokunmaz.
   ============================================================ */

/* --- TABLET (768px – 991.98px) --- */
@media (min-width: 768px) and (max-width: 991.98px) {

    /* Elementler kartı: sabit yüksekliği kaldır */
    .elements-card {
        height: auto;
        min-height: auto;
    }

    /* Çakra: yatay düzeni koru ama daralt */
    .chakra-layout {
        gap: 10px;
    }

    .chakra-side {
        flex: 0 0 100px;
    }

    .chakra-img {
        max-width: 100px;
        height: 120px;
        border-radius: 12px;
    }

    .chakra-track {
        height: 15px;
    }

    .chakra-val {
        font-size: 11px;
    }

    .chakra-bars {
        gap: 3px;
    }

    .chakra-row {
        gap: 6px;
    }

    /* Compare-box: Pair modunda daha kompakt */
    .compare-box .elements-card {
        padding: 14px 10px 10px;
    }

    .compare-box .chakra-side {
        flex: 0 0 70px;
    }

    .compare-box .chakra-img {
        max-width: 70px;
        height: 90px;
    }

    .compare-box .chakra-track {
        height: 12px;
    }

    .compare-box .chakra-val {
        font-size: 10px;
    }

    .compare-box .chakra-bars {
        gap: 2px;
    }
}

/* --- MOBİL ÇAKRA İYİLEŞTİRMELER (≤ 767.98px) --- */
@media (max-width: 767.98px) {

    /* Elements card: yükseklik serbest */
    .elements-card {
        height: auto !important;
        min-height: auto !important;
        padding: 14px 10px 10px;
    }

    /* Çakra: dikey düzen, görsel küçük ve ortalı */
    .chakra-layout {
        flex-direction: column;
        gap: 8px;
        align-items: center;
    }

    .chakra-side {
        flex: 0 0 auto;
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .chakra-img {
        max-width: 160px;
        width: auto;
        height: auto;
        max-height: 120px;
        margin: 0 auto;
        display: block;
        border-radius: 10px;
    }

    .chakra-main {
        width: 100%;
    }

    .chakra-bars {
        gap: 5px;
        padding: 2px 0;
    }

    .chakra-row {
        gap: 8px;
    }

    /* Barlar mobilde daha kalın ve dokunulabilir */
    .chakra-track {
        height: 22px;
        border-radius: 0 10px 10px 0;
    }

    .chakra-bar {
        border-radius: 0 10px 10px 0;
    }

    .chakra-val {
        font-size: 13px;
        font-weight: 800;
        min-width: 22px;
    }

    /* Eğimi kaldır: mobilde düz göster */
    .chakra-tilt {
        transform: none !important;
    }

    .chakra-tilt .chakra-val {
        transform: none !important;
    }

    /* Compare-box çakra: daha kompakt */
    .compare-box {
        overflow: visible;
        padding: 10px;
    }

    .compare-box .elements-card {
        padding: 12px 8px 8px;
        box-shadow: none;
        border: none;
    }

    .compare-box .chart-badge {
        font-size: 9px;
        padding: 3px 16px;
    }

    .compare-box .chakra-img {
        max-height: 90px;
        max-width: 120px;
    }

    .compare-box .chakra-track {
        height: 18px;
    }

    .compare-box .chakra-val {
        font-size: 12px;
    }

    .compare-header {
        margin-bottom: 8px;
        padding-bottom: 6px;
    }

    .compare-name {
        font-size: 0.8rem;
    }
}

/* --- ÇOK KÜÇÜK EKRANLAR (≤ 479.98px) --- */
@media (max-width: 479.98px) {

    .chakra-img {
        max-height: 90px;
        max-width: 120px;
    }

    .chakra-track {
        height: 20px;
    }

    .chakra-val {
        font-size: 12px;
        min-width: 20px;
    }

    .chakra-bars {
        gap: 4px;
    }

    .compare-box .chakra-img {
        max-height: 70px;
        max-width: 90px;
    }

    .compare-box .chakra-track {
        height: 16px;
    }

    .compare-box .chakra-val {
        font-size: 11px;
    }

    .compare-box .elements-card {
        padding: 10px 6px 6px;
    }

    .compare-box .compare-header {
        margin-bottom: 6px;
        padding-bottom: 4px;
    }
}

/* ============================================================
   TOOLBAR BUTON GİZLEME KURALLARI (EN SON - TÜM MEDIA QUERY'LERDEN SONRA)
   ============================================================ */

/* Menü daraltıldığında Rapor ve Soru Sor butonları görünür kalsın */

/* Yıllık butonu - btn-soft-two ama btn-horary olmayan */
.dynamic-toolbar:not(.is-expanded) .btn-soft-two:not(.btn-horary) {
    display: none !important;
}

/* Transit Stepper her zaman görünsün (gizleme kuralı kaldırıldı) */

/* Expand butonu masaüstünde görünsün (mobilde panel mobil menü var, chevron gereksiz) */
@media (min-width: 768px) {

    .expand-toolbar-btn.toolbar-mobile,
    .expand-toolbar-btn.toolbar-overflow-visible,
    #expandToolbarBtn {
        display: inline-flex !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}


.panel-blur-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(2px);
    z-index: 100;
    border-radius: 0.5rem;
}

[data-theme="dark"] .panel-blur-overlay {
    background: rgba(20, 20, 20, 0.4);
}

.panel-blur-cta {
    text-align: center;
    padding: 1.5rem;
    max-width: 300px;
    background: white;
    border-radius: 0.75rem;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

[data-theme="dark"] .panel-blur-cta {
    background: #1e293b;
}

.panel-blur-cta-subscription {
    padding: 1.1rem 1.4rem;
    max-width: 320px;
    border-radius: 0.85rem;
}

.subscription-blur-line {
    display: inline-flex;
    flex-wrap: wrap;
    column-gap: 6px;
    row-gap: 2px;
    align-items: baseline;
    font-size: 0.9rem;
}

.subscription-blur-title {
    font-weight: 600;
    color: #0f172a;
}

[data-theme="dark"] .subscription-blur-title {
    color: #e5e7eb;
}


/* ========== Meta Card - Dark Mode ========== */
[data-theme="dark"] #chartMeta .meta-card {
    background: rgba(30, 41, 59, 0.9) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] #chartMeta .meta-card .fw-bold,
[data-theme="dark"] #chartMeta .meta-card .text-dark {
    color: #e2e8f0 !important;
}

[data-theme="dark"] #chartMeta .meta-card .text-secondary,
[data-theme="dark"] #chartMeta .meta-card .text-muted {
    color: #94a3b8 !important;
}


/* ========== Rapor Kredi Badge Sistemi ========== */

/* -- Masaüstü toolbar badge -- */
.report-credit-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1;
    margin-left: 6px;
    vertical-align: middle;
    letter-spacing: 0.02em;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.report-credit-badge i {
    font-size: 0.6rem;
}

#btnReportPdf:hover .report-credit-badge {
    transform: scale(1.12);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

/* Abone: yeşil gradient, parıltılı */
.report-credit-subscriber {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: #fff;
    animation: report-badge-glow 2.5s ease-in-out infinite;
}

/* Kredi var: mavi gradient */
.report-credit-has {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #fff;
}

/* Günlük ücretsiz: turkuaz gradient */
.report-credit-free {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
    color: #fff;
    position: relative;
}

.report-credit-free::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 12px;
    border: 1.5px dashed rgba(6, 182, 212, 0.45);
    animation: report-badge-pulse 2s ease-in-out infinite;
}

/* Hak bitti: gri */
.report-credit-empty {
    background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
    color: #fff;
    opacity: 0.7;
}

/* -- Mobil sidebar tile badge -- */
.report-credit-badge-tile {
    position: absolute;
    top: -4px;
    right: -4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    font-size: 0.6rem;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
    border: 2px solid #fff;
    z-index: 2;
}

.report-credit-badge-tile i {
    font-size: 0.55rem;
}

/* -- Animasyonlar -- */
@keyframes report-badge-glow {

    0%,
    100% {
        box-shadow: 0 0 4px rgba(34, 197, 94, 0.3);
    }

    50% {
        box-shadow: 0 0 10px rgba(34, 197, 94, 0.55), 0 0 20px rgba(34, 197, 94, 0.2);
    }
}

@keyframes report-badge-pulse {

    0%,
    100% {
        opacity: 0.5;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.05);
    }
}

/* -- Dark mode -- */
[data-theme="dark"] .report-credit-badge-tile {
    border-color: #1e293b;
}

[data-theme="dark"] .report-credit-empty {
    background: linear-gradient(135deg, #475569 0%, #334155 100%);
}

[data-theme="dark"] .report-credit-badge,
[data-theme="dark"] .report-credit-badge-tile {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.btn-479483 {
    background-color: #479483;
    color: #fff;
    border-color: #479483;
}

.btn-479483:hover {
    background-color: #357a6f;
    color: #fff;
    border-color: #357a6f;
}

/* ========================================
   YORUM AL MODAL
   ======================================== */

.comment-modal {
    border-radius: 22px;
    overflow: hidden;
    box-shadow:
        0 25px 60px rgba(15, 23, 42, .22),
        0 0 0 1px rgba(255, 255, 255, .08);
    background: #fff;
}

/* --- HEADER --- */
.comment-modal__header {
    position: relative;
    padding: 28px 24px 22px;
    overflow: hidden;
    background: linear-gradient(135deg, #136F63 0%, #1a8a7a 40%, #2f8f7a 100%);
}

.comment-modal__header-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 120% 80% at 80% 0%, rgba(255, 255, 255, .12) 0%, transparent 60%),
        radial-gradient(ellipse 80% 100% at 10% 100%, rgba(0, 0, 0, .1) 0%, transparent 50%);
    pointer-events: none;
}

.comment-modal__header-content {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    z-index: 1;
}

.comment-modal__icon-wrap {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .18);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
}

.comment-modal__title-wrap {
    flex: 1;
    min-width: 0;
}

.comment-modal__title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -.3px;
    line-height: 1.2;
}

.comment-modal__subtitle {
    margin: 3px 0 0;
    font-size: .82rem;
    color: rgba(255, 255, 255, .7);
    line-height: 1.3;
}

.comment-modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, .15);
    backdrop-filter: blur(6px);
    color: rgba(255, 255, 255, .8);
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .2s ease;
}

.comment-modal__close:hover {
    background: rgba(255, 255, 255, .3);
    color: #fff;
    transform: rotate(90deg);
}

/* decorative stars */
.comment-modal__stars {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.comment-modal__star {
    position: absolute;
    color: rgba(255, 255, 255, .2);
    font-size: 10px;
    animation: comment-star-twinkle 3s ease-in-out infinite alternate;
}

.comment-modal__star:nth-child(2) {
    animation-delay: .7s;
    font-size: 7px;
}

.comment-modal__star:nth-child(3) {
    animation-delay: 1.4s;
    font-size: 12px;
}

.comment-modal__star:nth-child(4) {
    animation-delay: 2.1s;
    font-size: 8px;
}

@keyframes comment-star-twinkle {
    0% {
        opacity: .25;
        transform: scale(.8);
    }

    100% {
        opacity: .7;
        transform: scale(1.1);
    }
}

/* --- TOKEN BAR --- */
.comment-modal__token-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 24px;
    background: linear-gradient(90deg, #f0fdf9 0%, #f0f9ff 100%);
    border-bottom: 1px solid rgba(15, 23, 42, .06);
}

.comment-modal__token-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.comment-modal__token-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    box-shadow: 0 3px 10px rgba(245, 158, 11, .3);
}

.comment-modal__token-label {
    display: block;
    font-size: .82rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.2;
}

.comment-modal__token-hint {
    display: block;
    font-size: .72rem;
    color: #94a3b8;
    line-height: 1.2;
}

.comment-modal__token-badge {
    font-size: 1.15rem;
    font-weight: 800;
    color: #136F63;
    background: rgba(19, 111, 99, .08);
    padding: 6px 16px;
    border-radius: 999px;
    letter-spacing: .3px;
    line-height: 1;
    white-space: nowrap;
}

/* --- BODY --- */
.comment-modal__body {
    padding: 20px 24px 24px;
    background: #fafbfc;
}

/* --- CARDS --- */
.comment-modal__cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.comment-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 16px;
    background: #fff;
    cursor: pointer;
    transition: all .25s cubic-bezier(.4, 0, .2, 1);
    text-align: left;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.comment-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    border-radius: 0 4px 4px 0;
    opacity: 0;
    transition: opacity .25s ease;
}

.comment-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .08);
    border-color: transparent;
}

.comment-card:hover::before {
    opacity: 1;
}

.comment-card:active {
    transform: translateY(0);
}

/* card icon */
.comment-card__icon {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    transition: transform .25s ease;
}

.comment-card:hover .comment-card__icon {
    transform: scale(1.08);
}

/* card text */
.comment-card__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.comment-card__name {
    font-size: .9rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.3;
}

.comment-card__desc {
    font-size: .78rem;
    color: #94a3b8;
    line-height: 1.4;
}

.comment-card__cost {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .72rem;
    font-weight: 600;
    margin-top: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    width: fit-content;
    line-height: 1;
}

/* card arrow */
.comment-card__arrow {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
    transition: all .25s ease;
    background: rgba(0, 0, 0, .04);
    color: #94a3b8;
}

.comment-card:hover .comment-card__arrow {
    transform: translateX(3px);
}

/* --- NATAL theme --- */
.comment-card--natal .comment-card__icon {
    background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%);
    color: #2563eb;
    box-shadow: 0 4px 12px rgba(37, 99, 235, .12);
}

.comment-card--natal::before {
    background: #2563eb;
}

.comment-card--natal:hover {
    background: linear-gradient(135deg, #fff 60%, #eff6ff 100%);
}

.comment-card--natal:hover .comment-card__arrow {
    background: #2563eb;
    color: #fff;
}

.comment-card__cost--natal {
    background: rgba(37, 99, 235, .07);
    color: #2563eb;
}

/* --- RELATIONSHIP theme --- */
.comment-card--relationship .comment-card__icon {
    background: linear-gradient(135deg, #fce7f3 0%, #fff1f2 100%);
    color: #e11d48;
    box-shadow: 0 4px 12px rgba(225, 29, 72, .12);
}

.comment-card--relationship::before {
    background: #e11d48;
}

.comment-card--relationship:hover {
    background: linear-gradient(135deg, #fff 60%, #fff1f2 100%);
}

.comment-card--relationship:hover .comment-card__arrow {
    background: #e11d48;
    color: #fff;
}

.comment-card__cost--relationship {
    background: rgba(225, 29, 72, .07);
    color: #e11d48;
}

/* --- ANNUAL theme --- */
.comment-card--annual .comment-card__icon {
    background: linear-gradient(135deg, #d1fae5 0%, #ecfdf5 100%);
    color: #059669;
    box-shadow: 0 4px 12px rgba(5, 150, 105, .12);
}

.comment-card--annual::before {
    background: #059669;
}

.comment-card--annual:hover {
    background: linear-gradient(135deg, #fff 60%, #ecfdf5 100%);
}

.comment-card--annual:hover .comment-card__arrow {
    background: #059669;
    color: #fff;
}

.comment-card__cost--annual {
    background: rgba(5, 150, 105, .07);
    color: #059669;
}

/* --- UPSELL --- */
.comment-modal__upsell {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
    margin-top: 16px;
    padding: 10px 16px;
    border-radius: 12px;
    background: linear-gradient(90deg, rgba(251, 191, 36, .06) 0%, rgba(245, 158, 11, .06) 100%);
    border: 1px dashed rgba(245, 158, 11, .25);
    font-size: .8rem;
    color: #92400e;
}

.comment-modal__upsell i {
    color: #f59e0b;
}

.comment-modal__upsell a {
    color: #d97706;
    font-weight: 700;
    text-decoration: none;
    transition: color .2s;
}

.comment-modal__upsell a:hover {
    color: #92400e;
    text-decoration: underline;
}

/* --- RESPONSIVE --- */
@media (max-width: 575.98px) {
    .comment-modal {
        border-radius: 18px;
    }

    .comment-modal__header {
        padding: 22px 18px 18px;
    }

    .comment-modal__token-bar {
        padding: 10px 18px;
    }

    .comment-modal__body {
        padding: 16px 18px 20px;
    }

    .comment-card {
        padding: 14px 12px;
        gap: 10px;
    }

    .comment-card__icon {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    .comment-card__arrow {
        width: 28px;
        height: 28px;
    }
}

/* --- MODAL OPEN ANIMATION --- */
#commentRequestModal .modal-dialog {
    transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), opacity .25s ease;
}

#commentRequestModal.show .modal-dialog {
    transform: none;
}

#commentRequestModal .comment-card {
    opacity: 0;
    transform: translateY(12px);
    animation: comment-card-enter .4s cubic-bezier(.4, 0, .2, 1) forwards;
}

#commentRequestModal .comment-card:nth-child(1) {
    animation-delay: .1s;
}

#commentRequestModal .comment-card:nth-child(2) {
    animation-delay: .2s;
}

#commentRequestModal .comment-card:nth-child(3) {
    animation-delay: .3s;
}

@keyframes comment-card-enter {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   RAPOR SONUÇ MODALI
   ======================================== */

.report-modal__dialog {
    max-width: 720px;
}

@media (min-width: 992px) {
    .report-modal__dialog {
        max-width: 760px;
    }
}

.report-modal {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 25px 70px rgba(15, 23, 42, .22);
    background: #f4f5f7;
    display: flex;
    flex-direction: column;
    max-height: 90vh;
}

/* --- HEADER --- */
.report-modal__header {
    position: relative;
    padding: 18px 22px;
    overflow: hidden;
    background: linear-gradient(135deg, var(--astro-deep-teal, #136F63) 0%, var(--astro-main-green, #2f8f7a) 100%);
    flex-shrink: 0;
}

.report-modal__header-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 120% 100% at 85% 0%, rgba(255, 255, 255, .08) 0%, transparent 50%);
    pointer-events: none;
}

.report-modal__header-content {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 1;
}

.report-modal__icon-wrap {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: rgba(255, 255, 255, .14);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    color: #fff;
    flex-shrink: 0;
}

.report-modal__title-wrap {
    flex: 1;
    min-width: 0;
}

.report-modal__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -.2px;
    line-height: 1.2;
}

.report-modal__subtitle {
    margin: 2px 0 0;
    font-size: .74rem;
    color: rgba(255, 255, 255, .55);
    line-height: 1.3;
}

.report-modal__close-btn {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, .12);
    color: rgba(255, 255, 255, .7);
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .2s ease;
}

.report-modal__close-btn:hover {
    background: rgba(255, 255, 255, .25);
    color: #fff;
    transform: rotate(90deg);
}

/* --- BODY --- */
.report-modal__body {
    flex: 1;
    overflow-y: auto;
    padding: 24px 20px;
    background: #f4f5f7;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, .1) transparent;
}

.report-modal__body::-webkit-scrollbar {
    width: 5px;
}

.report-modal__body::-webkit-scrollbar-track {
    background: transparent;
}

.report-modal__body::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, .1);
    border-radius: 999px;
}

.report-modal__body::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, .18);
}


/* --- LOADING --- */
.report-modal__loading {
    text-align: center;
    padding: 60px 20px;
}

.report-modal__loading-spinner {
    margin-bottom: 20px;
}

.report-modal__loading-spinner .spinner-border {
    width: 44px;
    height: 44px;
    border-width: 3px;
    color: var(--astro-main-green, #2f8f7a);
}

.report-modal__loading-text {
    font-size: 1rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 4px;
}

.report-modal__loading-hint {
    font-size: .85rem;
    color: #94a3b8;
}

/* --- FOOTER / PDF İNDİR --- */
.report-modal__footer {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 24px 16px;
    background: #fff;
    border-top: 1px solid rgba(0, 0, 0, .06);
}

.report-modal__footer-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .82rem;
    color: #64748b;
}

.report-modal__footer-info i {
    font-size: 18px;
    color: #dc2626;
    opacity: .7;
}

.report-modal__download-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 22px;
    border-radius: 12px;
    border: none;
    background: linear-gradient(135deg, var(--astro-deep-teal, #136F63) 0%, var(--astro-main-green, #2f8f7a) 100%);
    color: #fff;
    font-size: .85rem;
    font-weight: 700;
    cursor: pointer;
    transition: all .25s cubic-bezier(.4, 0, .2, 1);
    white-space: nowrap;
    min-width: 170px;
    position: relative;
    overflow: hidden;
}

.report-modal__download-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(19, 111, 99, .3);
    background: linear-gradient(135deg, var(--astro-main-green-hover, #1f6f5e) 0%, var(--astro-deep-teal, #136F63) 100%);
}

.report-modal__download-btn:active:not(:disabled) {
    transform: translateY(0);
}

.report-modal__download-btn:disabled {
    cursor: default;
    opacity: .85;
}

.report-modal__download-btn-default,
.report-modal__download-btn-loading,
.report-modal__download-btn-done {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.report-modal__download-btn-default i {
    font-size: 13px;
    transition: transform .2s ease;
}

.report-modal__download-btn:hover:not(:disabled) .report-modal__download-btn-default i {
    animation: report-download-bounce .5s ease;
}

@keyframes report-download-bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(3px);
    }

    60% {
        transform: translateY(-1px);
    }
}

/* loading state */
.report-modal__download-btn--loading {
    background: linear-gradient(135deg, #475569 0%, #64748b 100%);
}

.report-modal__download-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, .3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: report-spin 1s linear infinite;
}

/* done state */
.report-modal__download-btn--done {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
}

.report-modal__download-btn--done i {
    animation: report-check-pop .4s cubic-bezier(.34, 1.56, .64, 1);
}

/* responsive */
@media (max-width: 575.98px) {
    .report-modal__footer {
        flex-direction: column;
        gap: 10px;
        padding: 12px 16px 14px;
    }

    .report-modal__footer-info {
        font-size: .78rem;
    }

    .report-modal__download-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ========================================
   RAPOR İÇERİK TİPOGRAFİSİ
   ======================================== */

.report-content {
    color: #334155;
    line-height: 1.8;
    font-size: .94rem;
}

.report-content__h1 {
    font-size: 1.5rem;
    font-weight: 800;
    color: #136F63;
    margin: 0 0 20px 0;
    padding-bottom: 0;
    letter-spacing: -.3px;
    line-height: 1.3;
}

.report-content__h2 {
    font-size: 1.12rem;
    font-weight: 800;
    color: #136F63;
    margin: 36px 0 14px 0;
    padding: 14px 18px;
    border-radius: 12px;
    line-height: 1.4;
    letter-spacing: -.2px;
    position: relative;
}

.report-content__h2::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 18px;
    right: 18px;
    height: 2px;
    border-radius: 2px;
    opacity: .4;
}

.report-content__h2:first-child {
    margin-top: 0;
}

.report-content__h3 {
    font-size: 1rem;
    font-weight: 700;
    color: #1f6f5e;
    margin: 26px 0 10px 0;
    padding: 0 0 8px 0;
    border-bottom: 1px dashed rgba(19, 111, 99, .15);
    line-height: 1.4;
}

.report-content__p {
    margin: 0 0 14px 0;
    color: #475569;
    line-height: 1.85;
    font-size: .93rem;
}

.report-content__p strong {
    color: #1e293b;
    font-weight: 700;
}

.report-content__list {
    margin: 8px 0 16px 0;
    padding-left: 0;
    list-style: none;
}

.report-content__list li {
    position: relative;
    padding: 6px 0 6px 22px;
    font-size: .92rem;
    line-height: 1.7;
    color: #475569;
}

.report-content__list li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 14px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: linear-gradient(135deg, #136F63, #6ee7b7);
}

.report-content__list li strong {
    color: #1e293b;
    font-weight: 700;
}

/* --- RESPONSIVE --- */
@media (max-width: 767.98px) {
    .report-modal {
        border-radius: 14px;
        max-height: 92vh;
    }

    .report-modal__header {
        padding: 14px 16px;
    }

    .report-modal__body {
        padding: 16px 12px;
    }



    .report-content__h1 {
        font-size: 1.2rem;
    }

    .report-content__h2 {
        font-size: 1rem;
        margin-top: 24px;
        padding: 10px 14px;
    }

    .report-content__h3 {
        font-size: .94rem;
    }
}

@media (max-width: 575.98px) {
    .report-modal__body {
        padding: 12px 10px;
    }


    .report-content__h2 {
        padding: 8px 12px;
    }
}

/* Progress banner animasyonu */
@keyframes rpb-enter {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(16px);
    }

    100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

#reportProgressBanner:not(.d-none) {
    animation: rpb-enter .35s cubic-bezier(.34, 1.4, .64, 1);
}

/* ===== DESKTOP NO-SCROLL FIT (≥992px) ===== */
/* Panel sayfası 1920×1080 viewport'a scroll olmadan sığar */
@media (min-width: 992px) {

    body.panel-page {
        height: 100vh;
        max-height: 100vh;
        overflow: hidden;
    }

    .panel-page-main {
        flex: 1 1 auto;
        overflow: hidden;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    /* Footer kompakt */
    body.panel-page .astro-footer {
        flex-shrink: 0;
    }

    /* Ana container kalan yüksekliği doldursun */
    .panel-page-main>.container-fluid {
        flex: 1 1 auto;
        overflow: hidden;
        min-height: 0;
    }

    /* panelHeaderH(72) + footer(~50) + padding(8) = ~130px çıkar viewport'tan */
    .panel-page-main>.container-fluid>.row {
        height: calc(100vh - var(--panelHeaderH, 72px) - 58px);
        overflow: hidden;
    }

    /* Sol harita alanı */
    .panel-page-main .col-md-8 {
        display: flex;
        flex-direction: column;
        min-height: 0;
        max-height: 100%;
    }

    .panel-page-main .col-md-8>.row {
        flex: 1 1 auto;
        min-height: 0;
        max-height: calc(100vh - var(--panelHeaderH, 72px) - 58px);
    }

    /* Ana ortadaki büyük harita - yan kartlarla aynı hizaya gelsin */
    #mainDropzone {
        max-height: calc(100% - 16px);
        padding: 0;
        overflow: visible;
    }

    /* SVG haritası container'ı dolduracak şekilde büyüsün */
    #mainDropzone .main-svg {
        padding: 0 !important;
    }

    .main-svg svg {
        max-height: calc(90% + 16px);
        width: 90%;
        max-width: 90% !important;
        margin: 0 auto;
    }



    /* Sol/sağ thumb kolonları - tam yükseklik */
    .panel-page-main .col-md-8>.row>.col-lg-3 {
        display: flex;
        flex-direction: column;
    }

    #leftList,
    #rightList {
        display: flex !important;
        flex-direction: column;
        flex: 1 1 auto;
        gap: 16px !important;
    }

    /* Her thumb kart biraz küçük */
    #leftList .thumb-card,
    #rightList .thumb-card {
        height: calc(30% - 8px);
    }

    /* Harita satırı */
    .panel-page-main .col-md-8>.row {
        flex: 1 1 auto;
        min-height: 0;
        max-height: calc(100vh - var(--panelHeaderH, 72px) - 58px);
        align-items: stretch;
    }

    /* Thumb kolonları flex-end hizalama */
    .panel-page-main .col-md-8>.row>.col-lg-3 {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }

    /* Alt detay kutuları (elementler, nitelikler, çakralar, ay fazı) */
    .person-detail-section {
        max-height: 155px;
        overflow: hidden;
        margin-top: 4px !important;
    }

    .person-detail-section .row.pt-3 {
        padding-top: 4px !important;
    }

    /* ===== SAĞ PANEL (aspekt tablosu + tab butonlar) ===== */

    /* Sağ panel kolonu flex */
    .right-panel-column {
        display: flex;
        flex-direction: column;
        min-height: 0;
        max-height: 100%;
    }

    /* Sağ panel kartı - flex column ile tab bar altta sabit kalır */
    .right-panel-card {
        position: relative;
        flex: 1 1 auto;
        min-height: 0;
        max-height: calc(100vh - var(--panelHeaderH, 72px) - 58px);
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    /* Sağ panel collapse alanı esnek */
    .right-panel-card #rightPanelCollapseArea {
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    /* Sağ panel scroll area */
    .right-panel-scroll-area {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
    }

    /* Tab bar altta sabit */
    .right-panel-card .right-tabs-bar {
        flex-shrink: 0;
    }
}