:root {
    --panel-chart-card-pad: 5px;
}

.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 0.12s ease,
        box-shadow 0.12s ease,
        outline-color 0.12s ease;
    outline: 2px solid transparent;
}

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

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

.dynamic-toolbar[data-toolbar-disabled="1"] {
    pointer-events: none;
    opacity: 0.85;
}

.chart-create-icon--new {
    background: #2f8f7a;
}

.chart-create-icon--dual {
    background: #C84153;
}

.chart-create-icon--relationship {
    background: #800E13;
}

.collapse-trigger {
    cursor: pointer;
}

.collapse-trigger .transition-180 {
    transition: transform 0.2s ease;
}

.collapse-trigger[aria-expanded="true"] .transition-180 {
    transform: rotate(180deg);
}

.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;
}

/* Custom graphics: ev çizgileri tek tip ve nötr çizilir (ASC/MC kalın-vurgu yok) */
.line-house-custom {
    stroke: #666;
    stroke-width: 1.5;
}

/* 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, 0.06);
}

.chart-card-mini {
    background: #ffffff;
    border-radius: 14px;
    padding: var(--panel-chart-card-pad, 5px);
    position: relative;
    overflow: visible;
}

.panel-slot-card,
.panel-slot-placeholder,
.dropzone {
    position: relative;
}

.panel-slot-action,
.panel-main-slot-action {
    position: absolute;
    top: 10px;
    bottom: auto;
    right: 10px;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 999px;
    background: rgba(17, 24, 39, 0.82);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-2px);
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease;
    z-index: 12;
}

.panel-page--pair-view .panel-main-slot-action {
    top: auto;
    bottom: 10px;
    transform: translateY(2px);
}

/* Sideral (Vedik) haritada sağ üstte Ayanamsha/Dasha bilgi kutusu olduğu için
   harita değiştirme butonu çakışmasın diye sağ alta taşınır. */
#mainDropzone[data-active-key="sidereal"] .panel-main-slot-action,
#mainDropzone[data-active-key="sidereal_transit"] .panel-main-slot-action {
    top: auto;
    bottom: 10px;
    transform: translateY(2px);
}

.panel-slot-card:hover .panel-slot-action,
.dropzone:hover .panel-main-slot-action {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.panel-slot-action:hover,
.panel-main-slot-action:hover {
    background: rgba(17, 24, 39, 0.96);
}

.panel-slot-placeholder {
    min-height: 210px;
    border: 1px dashed rgba(100, 116, 139, 0.35);
    background: linear-gradient(135deg, #f8fafc 0%, #eef3f7 100%);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.panel-slot-plus,
.panel-main-slot-plus {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 0;
    background: #2f8f7a;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    box-shadow: 0 8px 16px rgba(47, 143, 122, 0.24);
}

.panel-slot-plus:hover,
.panel-main-slot-plus:hover {
    background: #267664;
}

.panel-main-placeholder-active {
    border-style: dashed;
}

.panel-main-placeholder {
    position: absolute;
    inset: 18px;
    border-radius: 14px;
    border: 1px dashed rgba(100, 116, 139, 0.35);
    background: linear-gradient(135deg, #f8fafc 0%, #eef3f7 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 8;
}

.panel-slot-picker-modal .modal-header {
    border-bottom: 1px solid #eef2f7;
}

.panel-slot-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}

.panel-slot-picker-card {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
    padding: 14px 12px;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.panel-slot-picker-card:hover:not(:disabled) {
    border-color: #2f8f7a;
    box-shadow: 0 8px 18px rgba(47, 143, 122, 0.15);
    transform: translateY(-1px);
}

.panel-slot-picker-card:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.panel-slot-picker-card--loading:disabled {
    opacity: 1;
    border-color: #2f8f7a;
    background: #f4fbf8;
    box-shadow: 0 8px 18px rgba(47, 143, 122, 0.15);
}

.panel-slot-picker-icon {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: #eef6f3;
    color: #2f8f7a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.panel-slot-picker-title {
    font-size: 0.92rem;
    font-weight: 600;
    color: #1f2937;
}

/* 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;
}

/* Mini slot SVG içindeki sol alt köşe marka logosunu / filigranını gizle */
.chart-card-mini .thumb-svg [id*="chartBrandWatermark"],
.chart-card-mini .thumb-svg .chart-brand-watermark,
#leftList .chart-card-mini [id*="chartBrandWatermark"],
#leftList .chart-card-mini .chart-brand-watermark,
#rightList .chart-card-mini [id*="chartBrandWatermark"],
#rightList .chart-card-mini .chart-brand-watermark {
    display: none !important;
}

/* 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 0.12s ease;
}

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

/* Dropzone */
.dropzone {
    border: 2px dashed rgba(47, 143, 122, 0.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, 0.1);
}

/* 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, 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, 0.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, 0.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, 0.1);
        background: linear-gradient(
            135deg,
            rgba(47, 143, 122, 0.06),
            rgba(255, 255, 255, 1)
        );
        color: #334155;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
        transition: all 0.2s ease;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background-image:
            linear-gradient(
                135deg,
                rgba(47, 143, 122, 0.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, 0.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, 0.25);
        color: #0f172a;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    }

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

    #mobileChartSelect option:checked {
        background: linear-gradient(
            135deg,
            rgba(47, 143, 122, 0.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, 0.05);
    background: #fff;
    transition: all 0.2s ease;
}

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

.form-select-modern:focus {
    border-color: #2f8f7a;
    box-shadow: 0 0 0 3px rgba(47, 143, 122, 0.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, 0.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, 0.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, 0.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, 0.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, 0.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, 0.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 0.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 0.2s ease,
        transform 0.2s ease,
        visibility 0.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, 0.12),
        0 0 0 1px rgba(0, 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 0.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, 0.08);
}

.chart-create-option:active {
    transform: translateX(2px) scale(0.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, 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, 0.08);
    box-shadow: 0 24px 80px rgba(15, 23, 42, 0.18);
}

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

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

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

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

.form-control-modern:focus {
    box-shadow: 0 0 0 0.25rem rgba(59, 130, 246, 0.18);
    border-color: rgba(59, 130, 246, 0.55);
}

/* input-group */
.input-group-modern .input-group-text {
    border-radius: 14px 0 0 14px;
    border: 1px solid rgba(15, 23, 42, 0.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, 0.1);
}

.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, 0.08);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
    transition:
        transform 0.12s ease,
        box-shadow 0.12s ease;
    background: linear-gradient(180deg, #fff, #fbfbfc);
}

.mychart-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.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;
}

/* Hesapla butonu disabled olduğunda beyaza düşmesin */
.btn.btn-color-four:disabled,
.btn.btn-color-four.disabled {
    background: #1f6f5e !important;
    border-color: #1f6f5e !important;
    color: #ffffff !important;
    opacity: 1 !important;
    cursor: not-allowed;
}

/* 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: 0.9;
}

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

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

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

.relationship-line-house-mc {
    /* Çoklu haritalarda MC: siyah */
    stroke: #000;
    stroke-width: 2.6;
    opacity: 0.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;
}

/* ✅ Açı vurgulama: bir gezegene tıklanınca açı yapmayan noktalar/çizgiler soluklaşır.
   pointer-events bilinçli olarak KAPATILMIYOR: kullanıcı soluklaşmış başka bir
   gezegene tıklayarak vurgulamayı doğrudan ona geçirebilsin (tekrar boş alana
   tıklamaya gerek kalmadan). */
.aspect-dim {
    opacity: 0.12 !important;
    transition: opacity .15s ease;
}

#mainSvg g[data-key],
#mainSvg text[data-key] {
    cursor: pointer;
}

/* 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.
       ✅ 105% değil 100%: uranyen dial/natal gibi geniş viewBox'lı haritalarda
       (lightbox'ta viewBox değiştirilmez) 105% haritayı dikeyde kırpıyor,
       sol alttaki logo + www.astrobilge.com filigranı görünmez kalıyordu. */
    max-width: 100% !important;
    max-height: 100% !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;
}

/* 5b. Paylaş Butonu (Sağ Alt Köşe) — büyütülmüş harita görünümünde */
.chart-share-btn {
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: 20;
    width: 44px;
    height: 44px;
    border: 1px solid #ddd;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(4px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    color: #333;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.chart-share-btn:hover {
    background: #479483;
    color: #fff;
    border-color: #479483;
}

.chart-share-btn:disabled {
    opacity: 0.6;
    cursor: wait;
}

/* ✅ Uranyen İLİŞKİ dial'ı kişi lejantı: SVG'ye hep gömülü gelir ama panel
   ve büyütülmüş (Fancybox lightbox) görünümlerde GİZLİ tutulur — isimler
   zaten sol/sağ üstteki meta kartlarında var. Paylaşım PNG'sinde harici CSS
   uygulanmadığı için lejant orada doğal olarak görünür (istenen davranış). */
.uranian-pair-legend {
    display: none;
}

/* ✅ Uranyen Doğum Haritası + Midpoint Trees: büyütülmüş görünümdeki canlı
   AXIS paneli (bkz. panel.js openLightboxForActive). Liste eksene göre
   uzayıp kısaldığından zoom-fit yerine dikey scroll kullanılır. */
.astro-modal__data-col--midpoint {
    overflow-y: auto;
}

/* 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-share-btn {
        bottom: 10px;
        right: 10px;
        width: 40px;
        height: 40px;
    }
}

/* ==============================
   LIGHTBOX SPLIT GÖRÜNÜM
   Masaüstü: harita solda, veri paneli (gezegen konumları + açı tablosu)
   sağda — astro.com tarzının aynalanmış hali.
   Mobil: astro-seek tarzı dikey akış — üstte harita, altında tablolar.
   ============================== */

/* Harita kolonu: paylaş butonu bunun içinde absolute konumlanır */
.astro-modal__chart-col {
    position: relative;
    width: 100%;
    height: 100%;
    min-width: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Split modda modal daha geniş olsun (yan panele yer açılır) */
.astro-fancybox-split .fancybox__content {
    width: min(1500px, 96vw) !important;
}

.astro-modal__body--split {
    justify-content: flex-start;
    align-items: stretch;
}

.astro-modal__body--split .astro-modal__chart-col {
    flex: 1 1 auto;
    height: auto;
    overflow: hidden;
}

/* Harita, meta kartının altında kalan alanı doldursun */
.astro-modal__body--split .astro-modal__dropzone {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.astro-modal__body--split .astro-modal__dropzone .main-svg {
    flex: 1 1 auto;
    min-height: 0;
}

.astro-modal__body--split #panzoomContainer {
    height: 100%;
}

/* Sağ veri paneli */
.astro-modal__data-col {
    flex: 0 0 470px;
    width: 470px;
    min-width: 0;
    overflow-y: auto;
    overflow-x: auto;
    background: #fff;
    border-left: 1px solid rgba(15, 23, 42, 0.08);
    padding: 12px 14px 20px;
}

.astro-modal__data-section + .astro-modal__data-section {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
}

/* ==============================
   KOMPAKT VERİ PANELİ (astro.com / astro-seek tarzı)
   Gezegen listesi + ev girişleri + küçük açı matrisi — sıkı tipografi,
   tek ekranda okunabilir yoğunluk.
   ============================== */

/* Tek parça "çıktı" görünümü: panel/kart hissi yok, düz beyaz zemin,
   ayraç çizgisi yok — astro.com'un basılı harita sayfası gibi. */
.astro-modal__body--split {
    background: #fff;
}

.astro-modal__data-col--compact {
    flex-basis: 430px;
    width: 430px;
    font-size: 12.5px;
    line-height: 1.45;
    color: #1e293b;
    padding: 16px 18px;
    border-left: 0;
    background: #fff;
}

/* Sade metin bilgi bloğu (astro.com köşe bilgisi) */
.lbx-header {
    font-size: 12px;
    line-height: 1.5;
    color: #475569;
}

.lbx-header-name {
    font-weight: 700;
    font-size: 13.5px;
    color: #0f172a;
}

/* Masaüstü: bilgi bloğu sağ kolonun tepesinde; mobil: haritanın üstünde */
.lbx-header--desktop {
    display: none;
}

.lbx-header--mobile {
    align-self: flex-start;
    width: 100%;
    padding: 12px 16px 0;
}

@media (min-width: 992px) {
    .astro-modal__body--split .lbx-header--mobile {
        display: none;
    }

    .lbx-header--desktop {
        display: block;
        margin-bottom: 8px;
    }
}

.lbx-signline {
    font-size: 12px;
    margin: 0 0 8px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.lbx-signline-sun {
    color: #c0392b;
    font-weight: 600;
}

.lbx-signline-asc {
    color: #2471a3;
    font-weight: 600;
}

.lbx-signline-sep {
    color: #94a3b8;
}

/* Gezegen listesi: glif | isim | derece | burç glifi | dakika | R | ev */
.lbx-planets {
    display: flex;
    flex-direction: column;
}

.lbx-row {
    display: grid;
    grid-template-columns: 24px minmax(86px, 1fr) 32px 22px 32px 14px 20px;
    align-items: center;
    column-gap: 2px;
    line-height: 1.4;
}

.lbx-glyph,
.lbx-sign {
    font-family: 'HamburgSymbols';
    font-size: 16px;
    line-height: 1;
    text-align: center;
}

.lbx-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lbx-deg,
.lbx-min {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.lbx-r {
    color: #dc3545;
    font-weight: 700;
    font-size: 10px;
    text-align: center;
}

.lbx-house {
    text-align: right;
    color: #64748b;
    font-variant-numeric: tabular-nums;
}

.lbx-row--angle .lbx-name {
    font-weight: 700;
    color: #c0392b;
}

/* Ev girişleri: 2 sütun x 6 satır */
.lbx-houses {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 20px;
    margin-top: 12px;
}

.lbx-house-item {
    display: grid;
    grid-template-columns: 22px 32px 22px 32px;
    align-items: center;
    column-gap: 2px;
    line-height: 1.4;
}

.lbx-house-no {
    color: #64748b;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Kompakt açı matrisi */
.lbx-aspect-wrap {
    margin-top: 14px;
    overflow-x: auto;
}

.lbx-aspect-wrap table {
    border-collapse: collapse;
    margin: 0 auto;
}

/* Sayfadaki fit-aspect-table kendini karta göre boyutlandırır
   (width:100%, height:520px) — modalda gerçek hücre boyutuna döndürülür */
.lbx-aspect-wrap table.fit-aspect-table {
    width: auto !important;
    max-width: none;
    height: auto !important;
}

.lbx-aspect-wrap .asp {
    width: 11px;
    height: 11px;
    font-size: 11px;
}

.lbx-aspect-wrap td,
.lbx-aspect-wrap th {
    width: 17px;
    height: 17px;
    min-width: 17px;
    max-width: 17px;
    padding: 0 !important;
    text-align: center;
    vertical-align: middle;
}

.lbx-aspect-wrap .planet-glyph,
.lbx-aspect-wrap .f-astro {
    font-size: 12px !important;
    line-height: 1;
}

.lbx-aspect-wrap .asp svg {
    width: 10px;
    height: 10px;
}

/* Sayfadaki #rightTabsContent scope'lu kuralların klon karşılıkları */
.astro-modal__data-col .table-responsive {
    overflow: auto;
    max-width: 100%;
}

.astro-modal__data-col .aspect-body {
    align-items: stretch;
}

/* Mobil / dar ekran: dikey akış, tüm gövde scroll olur */
@media (max-width: 991.98px) {
    .astro-modal__body--split {
        flex-direction: column;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .astro-modal__body--split .astro-modal__chart-col {
        flex: 0 0 auto;
        width: 100%;
        overflow: visible;
    }

    .astro-modal__data-col {
        flex: 0 0 auto;
        width: 100%;
        max-width: none;
        border-left: 0;
        border-top: 1px solid rgba(15, 23, 42, 0.08);
        overflow: visible;
        padding: 12px 12px calc(20px + env(safe-area-inset-bottom));
    }

    /* Kompakt modda tek parça sayfa: ayraç çizgisi yok */
    .astro-modal__data-col--compact {
        border-top: 0;
        padding-top: 4px;
    }

    /* Dikey akışta harita sabit yükseklikte kalsın ki altındaki tablolar
       görünsün. panel-mobile-app.css'teki
       "body.panel-page .astro-fancybox-fullscreen #panzoomContainer
       { height: 100% !important }" kuralını daha yüksek özgüllükle ezer. */
    body.panel-page .astro-fancybox-fullscreen .astro-modal__body--split #panzoomContainer,
    .astro-modal__body--split #panzoomContainer {
        height: min(100vw, 58vh) !important;
    }
}

.chart-meta .meta-sub {
    font-size: 11px;
    color: rgba(0, 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, 0.2);
}

.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: 0.2px;
}

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

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

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

.picker-card {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 16px;
    padding: 14px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(0, 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, 0.04);
    flex: 0 0 auto;
}

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

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

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

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

.modal-modern .modal-footer {
    border: 0;
    padding: 14px 18px 18px;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 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, 0.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, 0.1);
    background: linear-gradient(180deg, #ffffff 0%, rgba(0, 0, 0, 0.02) 100%);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
    color: #0d6efd;
    font-weight: 800;
    transition:
        transform 0.12s ease,
        box-shadow 0.12s ease,
        border-color 0.12s ease;
}

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

.btn-chart-picker:active {
    transform: translateY(0);
    box-shadow: 0 8px 18px rgba(0, 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: 0.65;
    margin-top: 2px;
}

.btn-chart-picker .chev {
    margin-left: 6px;
    opacity: 0.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 0.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, 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: 0.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, 0.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, 0.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, 0.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: 0.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;
    }
}

/* =============== Harita Stili (Klasik / Custom / Shape) =============== */
.chart-style-btn-group {
    display: flex;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #cbd5e1;
}

.chart-style-btn {
    flex: 1 1 0;
    padding: 8px 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: #475569;
    background: #fff;
    border: none;
    border-right: 1px solid #cbd5e1;
    cursor: pointer;
    transition: all 0.15s ease;
}

.chart-style-btn:last-child {
    border-right: none;
}

/* Shape stili geçici olarak gizli */
.chart-style-btn[data-style="shape"] {
    display: none !important;
}

.chart-style-btn:hover {
    background: #f1f5f9;
}

.chart-style-btn.active {
    background: #2f8f7a;
    color: #fff;
}

/* =============== 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, 0.15);
}

.house-system-select:focus {
    border-color: #2f8f7a;
    box-shadow: 0 0 0 3px rgba(47, 143, 122, 0.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, 0.1);
    background: rgba(255, 255, 255, 0.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 0.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, 0.16);
    color: #0f172a;
}

.panel-tab.active,
.panel-tab[aria-selected="true"] {
    background: linear-gradient(
        135deg,
        rgba(16, 185, 129, 0.16),
        rgba(59, 130, 246, 0.1)
    );
    border-color: rgba(16, 185, 129, 0.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, 0.06),
        rgba(16, 185, 129, 0.06)
    );
    border: 1px solid rgba(2, 6, 23, 0.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: -0.2px;
}

.section-title i {
    opacity: 0.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, 0.08);
    box-shadow: 0 6px 18px rgba(2, 6, 23, 0.06);
    transition:
        transform 0.12s ease,
        box-shadow 0.12s ease;
}

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

.rel-card {
    border-style: dashed !important;
    border-width: 2px !important;
    background: linear-gradient(
        180deg,
        rgba(245, 158, 11, 0.06),
        rgba(16, 185, 129, 0.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, 0.04);
    border: 1px solid rgba(2, 6, 23, 0.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, 0.7);
    border: 1px solid rgba(2, 6, 23, 0.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, 0.15);
    border: 1px solid rgba(59, 130, 246, 0.25);
}

.ab-pill.b {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.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;
}

/* Right panel title (badge) polish */
.right-panel-card > .chart-badge,
#rightPanelTitle.chart-badge {
    font-weight: 800;
    letter-spacing: 0.01em;
    border-radius: 12px;
    box-shadow: 0 12px 26px rgba(2, 6, 23, 0.10);
}

/* Scroll area: sağ panelde sağdan ve soldan 6px maksimum alan kullanımı */
.right-panel-scroll-area {
    padding: 8px 6px 12px;
}

/* Dark mode: make right panel feel cohesive */
[data-theme="dark"] .right-panel-card {
    border-radius: 16px;
}

[data-theme="dark"] .right-panel-scroll-area {
    background: transparent;
}

[data-theme="dark"] .elements-card {
    background: rgba(17, 24, 39, 0.55);
    border-color: rgba(148, 163, 184, 0.14);
}

[data-theme="dark"] .panel-mini-vchart__count {
    color: rgba(248, 250, 252, 0.92);
}

[data-theme="dark"] .vchart-val {
    color: rgba(248, 250, 252, 0.92);
}

[data-theme="dark"] .vchart-wrap {
    background: rgba(148, 163, 184, 0.10);
    border-color: rgba(148, 163, 184, 0.12);
}

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

/* Modern mini-metrics blocks (qualities / polarity) */
.panel-mini-vchart {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 10px;
    padding: 4px 4px 0;
}

.panel-mini-vchart--wide {
    gap: 14px;
}

.panel-mini-vchart__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    flex: 1 1 0;
}

.panel-mini-vchart__count {
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    color: #0f172a;
    margin-bottom: 4px;
}

.panel-mini-vchart__bar {
    height: 56px;
    max-width: 30px;
    width: 100%;
    border-radius: 10px;
}

.panel-mini-vchart__symbol {
    margin-top: 6px;
    font-weight: 800;
    font-size: 22px;
    line-height: 1;
    text-align: center;
}

.panel-mini-vchart__symbol--hamburg {
    font-family: "HamburgSymbols", sans-serif;
    font-weight: 600;
    font-size: 20px;
}

/* Elements icon tweaks */
.panel-element-icon {
    display: flex;
    justify-content: center;
    align-items: center;
}

.panel-element-icon__img {
    width: 24px;
    height: auto;
    display: block;
}

/* 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, 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, 0.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, 0.12);
}

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

/* =============== 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, 0.08);
    border: 1px solid rgba(15, 23, 42, 0.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, 0.04);
    border: 1px solid rgba(15, 23, 42, 0.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, 0.03);
    border: 1px solid rgba(15, 23, 42, 0.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: 0.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, 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%;
}

/* ==============================
   MIDPOINT AĞACI (Uranyen 90° Dial — Midpoint Trees modu)
   Eskiden haritanın sağında yüzen SVG kutunun HTML karşılığı; renkler
   birebir korunur (isim teal, orb siyah kalın, dial konumu gri).
   ============================== */
.uranian-midpoint-tab-body {
    font-family: Arial, sans-serif;
}

.uranian-midpoint-tab-body .umt-axis-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #000;
    color: #fff;
    border-radius: 6px;
    padding: 6px 14px;
    margin: 0 auto 14px;
    max-width: 220px;
    font-size: 14px;
    font-weight: bold;
}

.uranian-midpoint-tab-body .umt-axis-label {
    color: #ff3b3b;
}

.uranian-midpoint-tab-body .umt-axis-value {
    font-family: monospace;
}

.uranian-midpoint-tab-body .umt-rows {
    display: flex;
    flex-direction: column;
}

.uranian-midpoint-tab-body .umt-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 5px 4px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 12px;
}

.uranian-midpoint-tab-body .umt-row:last-child {
    border-bottom: none;
}

.uranian-midpoint-tab-body .umt-name {
    color: #1f6f5e;
    font-weight: bold;
    flex: 1 1 auto;
    text-align: left;
}

.uranian-midpoint-tab-body .umt-orb {
    color: #000;
    font-weight: bold;
    white-space: nowrap;
}

.uranian-midpoint-tab-body .umt-val {
    color: #999;
    font-size: 11px;
    min-width: 34px;
    text-align: right;
}

[data-theme="dark"] .uranian-midpoint-tab-body .umt-row {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .uranian-midpoint-tab-body .umt-orb {
    color: var(--text-primary, #e8e8e8);
}

/* ==============================
   İÇ SEVİYE SEKMELERİ (Konumlar içindeki Natal/Ev/Asteroid/Transit)
   ============================== */
/* ✅ ÇOKLU HARİTA: 3-4 kişide sekme sayısı artınca (Natal/Ev/Asteroid × kişi
   sayısı) tek satırda yatay kaydırma yerine alt satıra sarmalı. */
.right-panel-scroll-area .nav.right-tabs-bar,
ul[id^="planetTabs"] {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    overflow-x: visible;
    overflow-y: visible;
    -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: calc(0.72rem - 1px);
    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: calc(0.58rem - 1px);
    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 + Stelyum yan yana (scroll dışında, tab bar üstünde)
   SADECE Açı Tablosu sekmesi aktifken görünür; diğer sekmelerde (konumlar, güçlü gezegenler, fırdaria vb.) gizlenir */
.stars-stellium-row {
    display: flex;
    flex-direction: row;
    align-items: stretch;
}

#rightPanelCollapseArea:has(#tab-aspect:not(.active)) .stars-stellium-row,
#rightPanelCollapseArea:has(#tab-aspect:not(.show)) .stars-stellium-row,
.stars-stellium-row.d-none {
    display: none !important;
}

.stars-stellium-row .fixed-stars-bar,
.stars-stellium-row .stellium-bar {
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    flex: 1 1 0;
    min-width: 0;
}

#fixedStarsBar:not([style*="display: none"]) + #stelliumBar:not([style*="display: none"]) {
    border-left: 1px solid rgba(0, 0, 0, 0.06);
}

/* Sabit Yıldızlar Bar */
.fixed-stars-bar {
    padding: 6px 8px;
    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;
}

/* ✅ Stelyum Bar (sabit yıldızların sağında, aynı satırda) */
.stellium-bar {
    flex: 1 1 auto;
    padding: 6px 8px;
    border-left: 1px solid rgba(0, 0, 0, 0.06);
    background: linear-gradient(
        180deg,
        rgba(139, 92, 246, 0.03) 0%,
        rgba(255, 255, 255, 0) 100%
    );
    overflow: hidden;
    min-width: 0;
}

.stellium-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;
}

.stellium-bar-header i {
    color: #8b5cf6;
    font-size: 0.72rem;
}

.stellium-bar-row {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 2px 0 2px 5px;
    margin-bottom: 2px;
    font-size: 0.72rem;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
}

.stellium-bar-sym {
    font-size: 14px;
    line-height: 1;
}

.stellium-bar-name {
    font-weight: 600;
    color: #374151;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60px;
}

.stellium-bar-planets {
    font-size: 12px;
    color: #6b7280;
    letter-spacing: 1px;
}

.stellium-bar-house {
    color: #6b7280;
    font-size: 0.65rem;
    font-weight: 600;
    margin-left: auto;
    white-space: nowrap;
    padding-left: 6px;
}

[data-theme="dark"] .stellium-bar-house {
    color: var(--text-secondary, #9ca3af);
}

/* 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;
}

/* --- Harita üstü başlık şeridi: görseldeki gibi açılı ribbon --- */
.chart-badge {
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);

    background-color: #479483;
    color: #fff;
    padding: 4px 34px;
    border-radius: 6px; /* clip-path desteklemeyen tarayıcılar için */

    font-family: "Segoe UI", sans-serif;
    font-weight: 800;
    font-size: 10px;
    letter-spacing: 0.25px;
    line-height: 1;
    white-space: nowrap;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.14);
    z-index: 10;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
}

/* Yanları hafif açılı (trapez ribbon) görünüm */
@supports (clip-path: polygon(0 0)) {
    .chart-badge {
        border-radius: 0;
        clip-path: polygon(
            0% 0%,
            100% 0%,
            calc(100% - 14px) 100%,
            14px 100%
        );
    }
}

/* Önceki "alt kıvrım üçgenleri" artık kullanılmıyor */
.chart-badge::before,
.chart-badge::after {
    content: none !important;
}

/* 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;
    }
}

/* ===== SCROLLABLE PROFILE/PANEL PAGES ===== */
/* my-charts, ai-comments, balance gibi sayfalarda footer görünmesi için */
body.panel-scrollable {
    height: auto !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

body.panel-scrollable .panel-page-main,
body.panel-scrollable .panel-page-main > .container-fluid,
body.panel-scrollable .panel-page-main > .container-fluid > .row {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

/* 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: 1000px;
    flex-wrap: wrap;
    overflow: visible;
    align-items: center;
    gap: 0.4rem;
    transition: none;
}

@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: none;
}

.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;
}

@media (min-width: 992px) {
    .panel-page-main > .container-fluid > .row.align-items-stretch {
        align-items: stretch;
    }

    .panel-page-main .col-md-8,
    .panel-page-main .right-panel-column {
        display: flex;
        flex-direction: column;
    }

    .panel-page-main .col-md-8 > .row {
        flex: 1 1 auto;
        min-height: 0;
    }
}

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

/* Mobilde alt boşluğu kaldır: body ve main viewport’u doldurmaz, footer içeriğin hemen altında kalır */
@media (max-width: 991px) {
    body.panel-page {
        min-height: auto;
    }
    .panel-page-main {
        flex: 0 0 auto;
    }
}

.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;
}

/* ✅ İlişki/Çoklu görünümün AJAX akışında alt istatistik kutuları kişi
   başlıklı compare-box olarak basılır — bu kartlar tekli karta göre daha
   uzun olduğundan sabit 155px sınırına (aşağıdaki masaüstü media bloğu)
   sığmaz ve içerik kırpılırdı. Compare-box varsa bölüm serbestçe büyür. */
.person-detail-section:has(.compare-box) {
    max-height: none;
}

.person-detail-tabs {
    display: flex;
    gap: 8px;
    padding-bottom: 4px;
    margin: 0;
    list-style: none;
    border-bottom: 1px solid rgba(0, 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, 0.06);
    color: #334155;
    cursor: pointer;
    transition: all 0.2s ease;
}

.person-tab-btn:hover {
    background: rgba(0, 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, 0.12);
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 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, 0.12);
    /* senin yeşile uyum */
    color: #2d6f63;
}

.house-pill .house-label {
    font-weight: 700;
    font-size: 12px;
    color: #556;
    opacity: 0.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, 0.1);
    border: 1px solid rgba(15, 23, 42, 0.1);
    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;
}

/* Sağ panel kartı içindeki Açı Tablosu: Mükerrer/gereksiz iç kutuyu kaldır, 6px sağ/sol maksimum genişlik kullan */
.right-panel-card .aspect-card,
#tab-aspect .aspect-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
}

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

.right-panel-card .aspect-header,
#tab-aspect .aspect-header {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 0 6px 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

.aspect-body {
    padding: 12px;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: clamp(560px, 78vh, 100%);
    overflow-x: auto;
    /* Flex item'lar varsayılan olarak içeriğin min-content genişliğinin
       altına küçülmez (min-width:auto tuzağı); bu da geniş .syn-table'ın
       .aspect-card'ın overflow:hidden sınırından sessizce kırpılmasına
       (scrollbar oluşmadan taşmasına) yol açıyordu. min-width:0 ile bu
       kutunun kendi kapsayıcısına sığması, taşmanın .syn-table-wrap'in
       KENDİ overflow-x:scroll'una devredilmesi sağlanır. */
    min-width: 0;
}

.right-panel-card .aspect-body,
#tab-aspect .aspect-body {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: auto !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    min-width: 0 !important;
}

/* Gizlenen paneller kesinlikle gizlensin (display:none ezilmesin) */
.ag-pane[style*="display: none"],
.ag-pane[style*="display:none"],
.right-panel-card .ag-pane[style*="display: none"],
#tab-aspect .ag-pane[style*="display: none"],
.right-panel-card .ag-pane[style*="display:none"],
#tab-aspect .ag-pane[style*="display:none"] {
    display: none !important;
}

.right-panel-card .ag-pane,
#tab-aspect .ag-pane {
    width: 100% !important;
    max-width: 100% !important;
    min-height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
}

.right-panel-card .ag-pane[data-ag-pane="matrix"]:not([style*="display: none"]):not([style*="display:none"]),
#tab-aspect .ag-pane[data-ag-pane="matrix"]:not([style*="display: none"]):not([style*="display:none"]) {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    justify-content: center !important;
}

.right-panel-card .ag-pane[data-ag-pane="list"]:not([style*="display: none"]):not([style*="display:none"]),
#tab-aspect .ag-pane[data-ag-pane="list"]:not([style*="display: none"]):not([style*="display:none"]) {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    display: block !important;
}

/* Liste Paneli: Sağ panel kartında taşma ve mükerrer kutuları engelle */
.right-panel-card .ag-pairs-wrap,
#tab-aspect .ag-pairs-wrap,
#tab-planets .ag-pairs-wrap,
.right-panel-card .ag-pairs-scroll,
#tab-aspect .ag-pairs-scroll,
#tab-planets .ag-pairs-scroll {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
}

.right-panel-card .ag-pairs-table,
#tab-aspect .ag-pairs-table,
#tab-planets .ag-pairs-table {
    background: transparent !important;
    width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
    margin: 0 !important;
}

.right-panel-card .ag-pairs-table .ag-col-planet,
#tab-aspect .ag-pairs-table .ag-col-planet,
#tab-planets .ag-pairs-table .ag-col-planet {
    width: 42.5% !important;
}

.right-panel-card .ag-pairs-table .ag-col-aspect,
#tab-aspect .ag-pairs-table .ag-col-aspect,
#tab-planets .ag-pairs-table .ag-col-aspect {
    width: 15% !important;
    text-align: center !important;
}

.right-panel-card table.fit-aspect-table,
#tab-aspect table.fit-aspect-table {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
    margin: 0 auto !important;
    overflow: hidden !important;
}

.right-panel-card table.fit-aspect-table td.cell-aspect,
#tab-aspect table.fit-aspect-table td.cell-aspect {
    padding: 0 !important;
    aspect-ratio: 1 / 1 !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    background: #fff;
    min-width: 0 !important;
    overflow: hidden !important;
}

.right-panel-card table.fit-aspect-table td.cell-diag,
#tab-aspect table.fit-aspect-table td.cell-diag {
    padding: 0 0 0 1px !important;
    aspect-ratio: 1 / 1 !important;
    border: none !important;
    background: transparent !important;
    min-width: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
}

.right-panel-card table.fit-aspect-table .planet-text,
#tab-aspect table.fit-aspect-table .planet-text {
    min-width: 0 !important;
    width: 100% !important;
    font-size: clamp(8px, 1vw, 11px) !important;
    font-weight: 700 !important;
    text-align: center !important;
    display: inline-block !important;
}

.right-panel-card table.fit-aspect-table .planet-glyph,
#tab-aspect table.fit-aspect-table .planet-glyph {
    font-size: clamp(10px, 1.1vw, 13px) !important;
}

.right-panel-card table.fit-aspect-table .asp,
#tab-aspect table.fit-aspect-table .asp {
    width: 100% !important;
    height: 100% !important;
    max-width: 14px !important;
    max-height: 14px !important;
    font-size: clamp(9px, 0.95vw, 12px) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.right-panel-card table.fit-aspect-table .asp svg,
#tab-aspect table.fit-aspect-table .asp svg {
    width: clamp(8px, 0.85vw, 11px) !important;
    height: clamp(8px, 0.85vw, 11px) !important;
}

[data-theme="dark"] .right-panel-card table.fit-aspect-table td.cell-aspect,
[data-theme="dark"] #tab-aspect table.fit-aspect-table td.cell-aspect {
    background: rgba(30, 41, 59, 0.6) !important;
    border-color: rgba(148, 163, 184, 0.15) !important;
}

/* Çoklu karşılaştırma stack: dropdown üstte, tablo altta dikey aks */
.syn-stack-body {
    display: block;
    min-height: auto;
    overflow-x: visible;
    min-width: 0;
}

/* Synastry embed: kart içine gömülü kullanımda global flex'i devre dışı bırak */
.synastry-embed-body {
    display: block;
    min-height: auto;
    overflow: visible;
    min-width: 0;
}

/* Çoklu synastry: markup sürümünden bağımsız güvenli hizalama */
[data-syn-stack-root] > .aspect-body {
    display: block !important;
    min-height: auto !important;
    overflow-x: visible !important;
    min-width: 0 !important;
}

[data-syn-stack-root] .d-flex.align-items-center.gap-2.flex-nowrap {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
}

[data-syn-stack-root] [data-syn-stack-left],
[data-syn-stack-root] [data-syn-stack-right] {
    width: 100% !important;
    min-width: 0 !important;
}

.aspect-title-icon {
    display: inline-flex;
    width: 14px;
    height: 14px;
    margin-right: 4px;
    vertical-align: -2px;
    color: #64748b;
}

.aspect-title-icon svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    stroke-width: 1.2;
}

/* Tablo */
table.fit-aspect-table {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
    max-width: 520px;
    height: clamp(520px, 48vh, 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, 0.1);
    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;
}

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

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

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

/* 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: hidden;
    overflow-y: auto;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    background: #fff;
    margin-top: 30px;
    max-height: min(62vh, 560px);
    padding-bottom: 6px;
    /* .ag-pane bir flex konteyner; bu kutu onun flex item'ı olduğu için
       varsayılan min-width:auto genişçe .syn-table'a göre büyümesine ve
       .aspect-card'ın overflow:hidden sınırından kırpılmasına yol açıyordu.
       min-width:0 + max-width:100% ile taşma burada engellenir (hücre
       boyutları küçültüldüğü için artık yatay scroll'a gerek yok). */
    min-width: 0;
    max-width: 100%;
    touch-action: pan-y;
}

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

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

.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: 3px 6px;
    background: #f9f9f9;
    white-space: nowrap;
    text-align: left;
}

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

/* CELLS (Açılar) */
.syn-cell {
    border: 1px solid #e0e0e0;
    width: 26px;
    height: 28px;
    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: 8px;
    padding-right: 6px;
    justify-content: flex-end;
    white-space: nowrap;
}

.aspect-icon {
    width: 20px;
    flex: 0 0 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.aspect-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    line-height: 1;
    min-width: 70px;
}

.aspect-name {
    font-size: 11px;
    font-weight: 700;
    color: #444;
    line-height: 1.1;
}

.aspect-orb {
    font-size: 10px;
    color: #888;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 576px) {
    .aspect-info {
        min-width: 62px;
    }

    .aspect-name {
        font-size: 10px;
    }

    .aspect-orb {
        font-size: 9px;
    }
}

/* 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, 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, 0.08);
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 8px 18px rgba(0, 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, 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, 0.04);
}

.firdaria-card {
    height: 100%;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 22px rgba(0, 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, 0.03), rgba(0, 0, 0, 0));
    border-bottom: 1px solid rgba(0, 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;
    }
}

/* ============================================================
   FIRDARIA TAB ÖZEL STİLLERİ
   ============================================================ */

/* Gezegenlerin kutuları alttan ve üstten 2px küçülsün */
.firdaria-container .accordion-item {
    margin-bottom: 6px !important;
    border-radius: 8px !important;
}

.firdaria-container .accordion-button {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
}

/* Aktif Dönem Kutusu: Sitede kullandığımız en açık yeşil (#f0fdf4) */
.firdaria-container .accordion-item.firdaria-active-item {
    background-color: #f0fdf4 !important;
    border-color: #bbf7d0 !important;
}

.firdaria-container .accordion-item.firdaria-active-item .accordion-button,
.firdaria-container .accordion-button.firdaria-active-btn {
    background-color: #f0fdf4 !important;
}

.firdaria-container .accordion-item.firdaria-active-item .accordion-body {
    background-color: #f0fdf4 !important;
}

/* Aktif Dönem Yazısı: Kahverengi */
.firdaria-active-badge {
    color: #724c32 !important; /* Kahverengi */
    background: #fbf5ef !important; /* Çok açık sütlü kahve/krem zemin */
    border: 1px solid #dccbb8 !important;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 5px;
    letter-spacing: 0.2px;
}

/* Aktif alt dönem tablosu satırı */
.firdaria-container tr.firdaria-active-sub td {
    background-color: rgba(34, 197, 94, 0.12) !important;
    font-weight: 600;
}

/* Koyu mod (dark mode) uyumu */
[data-theme="dark"] .firdaria-container .accordion-item.firdaria-active-item,
[data-theme="dark"] .firdaria-container .accordion-item.firdaria-active-item .accordion-button,
[data-theme="dark"] .firdaria-container .accordion-item.firdaria-active-item .accordion-body {
    background-color: rgba(34, 197, 94, 0.08) !important;
    border-color: rgba(34, 197, 94, 0.25) !important;
}

[data-theme="dark"] .firdaria-active-badge {
    color: #dfc3a8 !important; /* Açık sütlü kahve */
    background: rgba(140, 94, 63, 0.25) !important;
    border-color: rgba(190, 145, 110, 0.4) !important;
}

[data-theme="dark"] .firdaria-container tr.firdaria-active-sub td {
    background-color: rgba(34, 197, 94, 0.18) !important;
}

/* 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, 0.08);
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 8px 18px rgba(0, 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, 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, 0.04);
}

/* Kart */
.compare-card {
    height: 100%;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 22px rgba(0, 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, 0.03), rgba(0, 0, 0, 0));
    border-bottom: 1px solid rgba(0, 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;
}

/* ============================================================ */
/* TOOLBAR KAYDET BUTONU – Glow animasyonu, harita seç renginde */
/* ============================================================ */
.dynamic-toolbar .btn-toolbar-save,
.btn-toolbar-save {
    background: #2f8f7a !important;
    color: #ffffff !important;
    border-color: #2f8f7a !important;
    font-weight: 700;
    box-shadow: 0 0 7px 1px rgba(47, 143, 122, 0.35);
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.dynamic-toolbar .btn-toolbar-save:hover,
.btn-toolbar-save:hover {
    background: #1f6f5e !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(47, 143, 122, 0.40) !important;
}

.btn-toolbar-save:disabled {
    opacity: 0.75;
    cursor: not-allowed;
}

/* ============================================================ */
/* TOOLBAR KİŞİ SEKMELERİ – kaldırıldı, meta-kart ile değiştirildi */
/* ============================================================ */

.preview-save-float {
    display: none !important;
}

/* butonun “floating” hali */
.btn-save-float {
    border-radius: 999px;
    padding: 12px 16px;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.14);
    border: 1px solid rgba(22, 163, 74, 0.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, 0.08);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.1);
    font-weight: 700;
    font-size: 12px;
    color: #166534;
    white-space: nowrap;
    opacity: 0.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, 0.12) transparent;
}

/* ====== STRONG PLANETS (Asaletler / Terim Yöneticilikleri) ====== */
.strong-planet-item {
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 14px;
    padding: 12px 12px 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.strong-planet-item .text-primary {
    color: #0f5a4f !important;
}

.strong-planet-item .progress {
    background: rgba(15, 23, 42, 0.06);
    border-radius: 999px;
    overflow: hidden;
}

.strong-planet-item .progress-bar {
    border-radius: 999px;
}

/* Yönetir: küçük ev numaraları */
.strong-planet-item .badge.border {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.22rem 0.42rem;
    border-radius: 999px;
    border-color: rgba(15, 23, 42, 0.14) !important;
    background: rgba(15, 23, 42, 0.04);
    color: rgba(15, 23, 42, 0.85);
    line-height: 1;
    font-weight: 800;
    white-space: nowrap;
}

/* Dignity badge (Zarar/Düşüş) */
.strong-planet-item .badge:not(.border) {
    color: #fff;
    border-radius: 999px;
    font-weight: 700;
    line-height: 1;
    padding: 0.22rem 0.5rem;
}

.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, 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, 0.12) transparent;
}

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

.dp-pair-scroll::-webkit-scrollbar-thumb {
    background: rgba(0, 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, 0.08);
    border-radius: 14px;
    padding: 14px 10px 12px;
    text-align: center;
    position: relative;
    box-shadow: 0 2px 8px rgba(0, 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, 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;
}

/* Sign/house badges: keep compact, consistent in light mode */
.dp-sign-house .badge.border {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0.28rem 0.5rem;
    border-radius: 999px;
    border-color: rgba(15, 23, 42, 0.14) !important;
    background: rgba(15, 23, 42, 0.04);
    color: rgba(15, 23, 42, 0.88);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

/* 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, 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;
}

/* ============================================================
   GÜÇLÜ GEZEGENLER: TEMEL ASALETLER & TERİM YÖNETİCİLİĞİ
   ============================================================ */
.dp-subsections {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .dp-subsections {
    border-top-color: rgba(255, 255, 255, 0.1);
}

.dp-section-card {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 12px;
    padding: 10px 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

[data-theme="dark"] .dp-section-card {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: none;
}

.dp-section-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    padding-bottom: 6px;
    margin-bottom: 8px;
}

[data-theme="dark"] .dp-section-header {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

.dp-section-title {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #4b5563;
}

[data-theme="dark"] .dp-section-title {
    color: #cbd5e1;
}

.dp-dignity-item {
    padding: 3px 0;
}

.dp-dignity-item:not(:last-child) {
    border-bottom: 1px dashed rgba(0, 0, 0, 0.05);
    padding-bottom: 6px;
    margin-bottom: 3px;
}

[data-theme="dark"] .dp-dignity-item:not(:last-child) {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

.dp-dignity-item .dp-item-sym {
    line-height: 1;
}

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

.charts-drawer {
    width: 17% !important;
    max-width: 90vw;
    border-left: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: -10px 0 40px rgba(0, 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, 0.08);
    background: linear-gradient(180deg, #fff, #fafbfc);
    padding: 12px 14px;
}

.charts-drawer-header .offcanvas-title {
    font-size: 13px;
    letter-spacing: -0.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, 0.06);
    background: rgba(0, 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, 0.06);
    overflow: visible;
    cursor: pointer;
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        border-color 0.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, 0.12);
    border-color: rgba(47, 148, 131, 0.2);
}

.chart-drawer-card.active {
    border-color: #479483;
    box-shadow: 0 8px 24px rgba(71, 148, 131, 0.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, 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 0.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, 0.04);
}

.chart-drawer-section-heading {
    grid-column: 1 / -1;
}

/* 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, 0.12);
    background: rgba(0, 0, 0, 0.02);
    cursor: pointer;
}

.chart-drawer-placeholder:hover {
    border-color: rgba(47, 148, 131, 0.4);
    background: rgba(47, 148, 131, 0.04);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(47, 148, 131, 0.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: #479483;
    transition: color 0.15s ease;
}

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

.chart-drawer-placeholder .chart-load-hint {
    font-size: 9px;
    font-weight: 700;
    color: #479483;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    transition: color 0.15s ease;
}

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

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

.chart-drawer-modal-card:hover {
    border-color: rgba(139, 92, 246, 0.45);
    background: rgba(139, 92, 246, 0.06);
    box-shadow: 0 8px 24px rgba(139, 92, 246, 0.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, 0.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, 0.1);
    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, 0.1);
    background: linear-gradient(
        135deg,
        rgba(47, 143, 122, 0.06),
        rgba(255, 255, 255, 1)
    );
    color: #334155;
    font-weight: 700;
    font-size: 14px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
}

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

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

.btn-stats-toggle .stats-toggle-icon {
    transition: transform 0.25s ease;
    font-size: 12px;
    opacity: 0.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, 0.14),
        rgba(255, 255, 255, 1)
    );
    border-color: rgba(47, 143, 122, 0.3);
}

/* 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, 0.1);
    background: linear-gradient(
        135deg,
        rgba(47, 143, 122, 0.06),
        rgba(255, 255, 255, 1)
    );
    color: #334155;
    font-weight: 700;
    font-size: 14px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
}

.btn-right-panel-toggle:hover,
.btn-right-panel-toggle:focus {
    background: linear-gradient(
        135deg,
        rgba(47, 143, 122, 0.12),
        rgba(255, 255, 255, 1)
    );
    border-color: rgba(47, 143, 122, 0.25);
    color: #0f172a;
    box-shadow: 0 6px 18px rgba(0, 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 0.25s ease;
    font-size: 12px;
    opacity: 0.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, 0.14),
        rgba(255, 255, 255, 1)
    );
    border-color: rgba(47, 143, 122, 0.3);
}

/* ------ 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;
        overflow-y: auto;
    }

    /* 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: 0;
        max-height: min(56vh, 460px);
        padding-bottom: 6px;
    }

    .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 - sadece masaüstü) ---------- */
    @media (min-width: 768px) {
        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-preview-side-blur-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 5;
    border-radius: 0.5rem;
}

[data-theme="dark"] .panel-preview-side-blur-overlay {
    background: rgba(20, 20, 20, 0.35);
}

.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: transparent !important;
    box-shadow: none;
    border-color: transparent !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;
}

/* ========== Meta Person Card – Kişi A/B tıklanabilir detay geçişi ========== */
.meta-person-card {
    cursor: pointer;
    border-radius: 8px;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    transition: background 0.15s ease;
    user-select: none;
}

.meta-person-card:hover {
    background: rgba(0, 0, 0, 0.04) !important;
}

.meta-person-card.active {
    background: rgba(47, 143, 122, 0.05) !important;
}

/* meta-card: arka planı tamamen şeffaf yap */
#chartMeta .meta-card {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    background: transparent !important;
}

[data-theme="dark"] #chartMeta .meta-card {
    background: rgba(15, 23, 42, 0.30) !important;
}

.meta-person-card-hint {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #64748b;
    opacity: 0.7;
    transition: opacity 0.15s ease;
}

.meta-person-card:hover .meta-person-card-hint,
.meta-person-card.active .meta-person-card-hint {
    opacity: 1;
    color: #2f8f7a;
}

/* Tıklama ikonu animasyonu */
@keyframes metaClickPulse {
    0%   { transform: scale(1)   translateY(0); }
    30%  { transform: scale(0.85) translateY(1px); }
    60%  { transform: scale(1.1) translateY(-1px); }
    100% { transform: scale(1)   translateY(0); }
}

.meta-click-icon {
    animation: metaClickPulse 1.8s ease-in-out infinite;
    transform-origin: center bottom;
}

.meta-person-card.active .meta-click-icon,
.meta-person-card:hover .meta-click-icon {
    animation-duration: 0.9s;
}

[data-theme="dark"] .meta-person-card:hover {
    background: rgba(255, 255, 255, 0.06) !important;
}

[data-theme="dark"] .meta-person-card.active {
    background: rgba(47, 143, 122, 0.14) !important;
    box-shadow: 0 0 0 1px rgba(47, 143, 122, 0.30);
}

/* ========== 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;
}

.btn-479483:disabled,
.btn-479483.disabled {
    background-color: #8fb5ad;
    border-color: #8fb5ad;
    color: #fff;
    opacity: 0.85;
}

.btn-outline-479483 {
    color: #479483;
    border-color: #479483;
    background-color: transparent;
}

.btn-outline-479483:hover {
    color: #fff;
    background-color: #479483;
    border-color: #479483;
}

.btn-outline-479483:disabled,
.btn-outline-479483.disabled {
    color: #6c8a83;
    border-color: rgba(71, 148, 131, 0.45);
    background-color: transparent;
    opacity: 0.65;
}

/* ========================================
   YORUM AL MODAL
   ======================================== */

#commentRequestModal .modal-dialog {
    max-width: min(1040px, 92vw);
    transition:
        transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
        opacity 0.25s ease;
}

#commentRequestModal.show .modal-dialog {
    transform: none;
}

.comment-modal {
    border-radius: 20px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 26px 64px rgba(15, 23, 42, 0.22);
}

.comment-modal__header {
    position: relative;
    padding: 22px 22px 18px;
    background: linear-gradient(135deg, #136f63 0%, #1a8a7a 45%, #2f8f7a 100%);
    overflow: hidden;
}

.comment-modal__header-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(
            ellipse 120% 90% at 86% -10%,
            rgba(255, 255, 255, 0.14) 0%,
            transparent 58%
        ),
        radial-gradient(
            ellipse 70% 100% at 0% 100%,
            rgba(0, 0, 0, 0.14) 0%,
            transparent 52%
        );
}

.comment-modal__header-content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 12px;
}

.comment-modal__icon-wrap {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.16);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
}

.comment-modal__title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
    letter-spacing: -0.2px;
}

.comment-modal__subtitle {
    margin: 3px 0 0;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.78);
}

.comment-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.88);
    z-index: 2;
    transition: all 0.2s ease;
}

.comment-modal__close:hover {
    transform: rotate(90deg);
    background: rgba(255, 255, 255, 0.28);
    color: #fff;
}

.comment-modal__stars {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.comment-modal__star {
    position: absolute;
    font-size: 9px;
    color: rgba(255, 255, 255, 0.28);
    animation: comment-star-twinkle 3s ease-in-out infinite alternate;
}

.comment-modal__star:nth-child(2) {
    animation-delay: 0.7s;
}

.comment-modal__star:nth-child(3) {
    animation-delay: 1.4s;
    font-size: 11px;
}

.comment-modal__star:nth-child(4) {
    animation-delay: 2.1s;
}

.comment-modal__token-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 20px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    background: linear-gradient(90deg, #f0fdf9 0%, #f8fbff 100%);
}

.comment-modal__token-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.comment-modal__token-icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 13px;
    box-shadow: 0 3px 10px rgba(245, 158, 11, 0.3);
}

.comment-modal__token-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    color: #1f2937;
    line-height: 1.15;
}

.comment-modal__token-hint {
    display: block;
    font-size: 0.68rem;
    color: #94a3b8;
    line-height: 1.15;
}

.comment-modal__token-badge {
    font-size: 1.05rem;
    font-weight: 800;
    color: #136f63;
    background: rgba(19, 111, 99, 0.1);
    border-radius: 999px;
    padding: 6px 14px;
    line-height: 1;
    white-space: nowrap;
}

.comment-modal__token-inline {
    display: flex;
    align-items: center;
}

.comment-modal__token-badge--compact {
    display: inline-flex;
    align-items: center;
    font-size: 0.88rem;
    padding: 5px 10px;
    border: 1px solid rgba(19, 111, 99, 0.18);
    background: rgba(19, 111, 99, 0.08);
}

.horary-type-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    align-items: stretch;
}

.horary-type-pill {
    display: flex;
    margin: 0;
    cursor: pointer;
}

.horary-type-pill__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.horary-type-pill__content {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    width: 100%;
    height: 100%;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid #dbe2ea;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease,
        background 0.2s ease;
}

.horary-type-pill__icon {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eef2ff;
    color: #4f46e5;
    flex-shrink: 0;
}

.horary-type-pill__text-wrap {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.horary-type-pill__title {
    font-size: 0.86rem;
    font-weight: 700;
    color: #1f2937;
    line-height: 1.2;
}

.horary-type-pill__desc {
    font-size: 0.72rem;
    color: #64748b;
    line-height: 1.2;
}

.horary-type-pill:hover .horary-type-pill__content {
    border-color: #a7cfc6;
    transform: translateY(-1px);
    box-shadow: 0 10px 18px rgba(15, 23, 42, 0.08);
}

.horary-type-pill__input:focus-visible + .horary-type-pill__content {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(19, 111, 99, 0.2);
}

.horary-type-pill__input:checked + .horary-type-pill__content {
    border-color: #136f63;
    background: linear-gradient(180deg, #f4fdf9 0%, #eef9f4 100%);
    box-shadow: 0 10px 20px rgba(19, 111, 99, 0.16);
}

.horary-type-pill__input:checked + .horary-type-pill__content .horary-type-pill__icon {
    background: linear-gradient(135deg, #136f63, #1f8c7d);
    color: #fff;
}

.horary-type-pill__input:checked + .horary-type-pill__content .horary-type-pill__title {
    color: #0f4f46;
}

.comment-modal__body {
    padding: 16px 20px 20px;
    background: #fafbfc;
}

.comment-modal__cards {
    align-items: stretch;
}

.comment-modal__cards > .col-12 {
    display: flex;
}

.comment-download-btn {
    position: relative;
    width: 100%;
    min-height: 204px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 14px 44px;
    border-radius: 14px;
    border: 1px solid #dbe2ea;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}

.comment-download-btn:hover {
    transform: translateY(-2px);
    border-color: #8cc7b8;
    box-shadow: 0 16px 30px rgba(15, 23, 42, 0.12);
}

.cdb-icon-wrap {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.cdb-title {
    font-size: 0.95rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.2;
}

.cdb-desc {
    flex: 1 1 auto;
    font-size: 0.79rem;
    color: #475569;
    line-height: 1.45;
}

.cdb-desc-list {
    margin: 0;
    padding-left: 1rem;
    font-size: 0.75rem;
    line-height: 1.35;
}

.cdb-desc-list li {
    margin-bottom: 2px;
}

.cdb-desc-list li:last-child {
    margin-bottom: 0;
}

.cdb-token {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 0.73rem;
    font-weight: 700;
    background: #eef6f3;
    color: #136f63;
}

.cdb-arrow {
    position: absolute;
    right: 12px;
    bottom: 10px;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    background: #f1f5f9;
    transition: all 0.2s ease;
}

.comment-download-btn:hover .cdb-arrow {
    background: #136f63;
    color: #fff;
    transform: translateX(2px);
}

.comment-download-btn--natal .cdb-icon-wrap {
    background: linear-gradient(135deg, #dbeafe, #eef4ff);
    color: #2563eb;
}

.comment-download-btn--relationship .cdb-icon-wrap {
    background: linear-gradient(135deg, #ffe4ef, #fff1f6);
    color: #e11d48;
}

.comment-download-btn--annual .cdb-icon-wrap {
    background: linear-gradient(135deg, #dcfce7, #ecfdf5);
    color: #059669;
}

.comment-modal__upsell {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 14px;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px dashed rgba(245, 158, 11, 0.28);
    background: linear-gradient(
        90deg,
        rgba(251, 191, 36, 0.06) 0%,
        rgba(245, 158, 11, 0.06) 100%
    );
    font-size: 0.78rem;
    color: #92400e;
}

.comment-modal__upsell i {
    color: #f59e0b;
}

.comment-modal__upsell a {
    color: #d97706;
    font-weight: 700;
    text-decoration: none;
}

.comment-modal__upsell a:hover {
    color: #92400e;
    text-decoration: underline;
}

#commentRequestModal .comment-download-btn {
    opacity: 0;
    transform: translateY(12px);
    animation: comment-card-enter 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

#commentRequestModal
    .comment-modal__cards
    .col-12:nth-child(1)
    .comment-download-btn {
    animation-delay: 0.1s;
}

#commentRequestModal
    .comment-modal__cards
    .col-12:nth-child(2)
    .comment-download-btn {
    animation-delay: 0.2s;
}

#commentRequestModal
    .comment-modal__cards
    .col-12:nth-child(3)
    .comment-download-btn {
    animation-delay: 0.3s;
}

@keyframes comment-card-enter {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes comment-star-twinkle {
    0% {
        opacity: 0.25;
        transform: scale(0.8);
    }

    100% {
        opacity: 0.7;
        transform: scale(1.08);
    }
}

@media (max-width: 575.98px) {
    .comment-modal {
        border-radius: 16px;
    }

    .comment-modal__header {
        padding: 18px 16px 15px;
    }

    .comment-modal__token-bar {
        padding: 9px 16px;
    }

    .comment-modal__body {
        padding: 14px 16px 18px;
    }

    .comment-modal__token-badge--compact {
        font-size: 0.82rem;
        padding: 4px 9px;
    }

    .horary-type-switch {
        grid-template-columns: 1fr;
    }

    #commentRequestModal .modal-dialog {
        max-width: 95vw;
    }

    .comment-download-btn {
        min-height: 184px;
        padding: 12px 12px 40px;
    }
}

/* ========================================
   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, 0.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, 0.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, 0.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: -0.2px;
    line-height: 1.2;
}

.report-modal__subtitle {
    margin: 2px 0 0;
    font-size: 0.74rem;
    color: rgba(255, 255, 255, 0.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, 0.12);
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.report-modal__close-btn:hover {
    background: rgba(255, 255, 255, 0.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, 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, 0.1);
    border-radius: 999px;
}

.report-modal__body::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 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: 0.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, 0.06);
}

.report-modal__footer-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: #64748b;
}

.report-modal__footer-info i {
    font-size: 18px;
    color: #dc2626;
    opacity: 0.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: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 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, 0.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: 0.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 0.2s ease;
}

.report-modal__download-btn:hover:not(:disabled)
    .report-modal__download-btn-default
    i {
    animation: report-download-bounce 0.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, 0.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 0.4s cubic-bezier(0.34, 1.56, 0.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: 0.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: 0.94rem;
}

.report-content__h1 {
    font-size: 1.5rem;
    font-weight: 800;
    color: #136f63;
    margin: 0 0 20px 0;
    padding-bottom: 0;
    letter-spacing: -0.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: -0.2px;
    position: relative;
}

.report-content__h2::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 18px;
    right: 18px;
    height: 2px;
    border-radius: 2px;
    opacity: 0.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, 0.15);
    line-height: 1.4;
}

.report-content__p {
    margin: 0 0 14px 0;
    color: #475569;
    line-height: 1.85;
    font-size: 0.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: 0.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: 0.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 0.35s cubic-bezier(0.34, 1.4, 0.64, 1);
}

/* ===== Report Progress Banner (opaque green like before) ===== */
#reportProgressBanner {
    opacity: 1 !important;
    background: transparent !important; /* children carry the gradient */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

#reportProgressBanner #rpb-loading,
#reportProgressBanner #rpb-ready {
    background: linear-gradient(135deg, #136F63 0%, #1f8a78 55%, #2f8f7a 100%) !important;
}

/* ===== DESKTOP FULL-VIEWPORT FIT (992px+) ===== */
/* Sayfa scroll yapmaz; her şey viewport içinde oturur */
@media (min-width: 992px) {
    body.panel-page {
        height: 100vh;
        max-height: 100vh;
        overflow: hidden;
    }

    .panel-page-main {
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .panel-page-main > .container-fluid {
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
    }

    .panel-page-main > .container-fluid > .row {
        height: calc(100vh - var(--panelHeaderH, 72px) - 58px);
        max-height: calc(100vh - var(--panelHeaderH, 72px) - 58px);
        overflow: hidden;
    }

    .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);
        align-items: stretch;
    }

    .right-panel-column {
        display: flex;
        flex-direction: column;
        align-self: stretch;
        min-height: 0;
        max-height: 100%;
    }

    .right-panel-column > .right-panel-card {
        flex: 1 1 auto;
        min-height: 0;
        max-height: calc(100vh - var(--panelHeaderH, 72px) - 58px);
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .panel-page-main
        .right-panel-column
        .right-panel-card
        #rightPanelCollapseArea {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .right-panel-scroll-area {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto !important;
        overflow-x: hidden;
    }

    /* ── Sol/Sağ küçük harita kolonları (col-lg-3) tam doldurur ── */
    .panel-page-main .col-md-8 > .row > .col-lg-3 {
        display: flex !important;
        flex-direction: column;
        min-height: 0;
        height: 100%;
        /* Badge üste taşıyor, clip etme */
        overflow: visible;
    }

    #leftList,
    #rightList {
        display: flex !important;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        gap: 12px !important;
        /* Badge alanı için üstten boşluk */
        padding-top: 10px;
    }

    #leftList .chart-card-mini,
    #rightList .chart-card-mini {
        flex: 1 1 0;
        min-height: 0;
        display: flex;
        flex-direction: column;
        /* overflow visible: badge yukarı taşar, kesilmesin */
        overflow: visible;
        padding-left: var(--panel-chart-card-pad, 5px) !important;
        padding-right: var(--panel-chart-card-pad, 5px) !important;
    }

    #leftList .chart-card-mini .thumb-svg,
    #rightList .chart-card-mini .thumb-svg {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    #leftList .chart-card-mini .thumb-svg svg,
    #rightList .chart-card-mini .thumb-svg svg {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        display: block;
    }

    /* ── Orta büyük harita kolonu (col-lg-6) tam doldurur ── */
    .panel-page-main .col-md-8 > .row > .col-lg-6 {
        display: flex !important;
        flex-direction: column;
        min-height: 0;
        height: 100%;
        /* Badge üste taşıyor, clip etme */
        overflow: visible;
        padding-top: 10px;
    }

    #mainDropzone {
        flex: 1 1 auto;
        min-height: 0;
        height: 100% !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        /* overflow visible: badge kesilmesin */
        overflow: visible;
        padding-left: var(--panel-chart-card-pad, 5px) !important;
        padding-right: var(--panel-chart-card-pad, 5px) !important;
    }

    #mainDropzone .main-svg {
        flex: 1 1 auto;
        min-height: 0;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        padding: 0 !important;
    }

    #mainDropzone .main-svg svg {
        width: auto;
        height: 100% !important;
        max-height: 100%;
        max-width: 100%;
        display: block;
        margin: 0 auto;
    }
}

/* ===== 1920x1080 ve ÜZERİ EKSTRA AYARLAR ===== */
/* Büyük harita ve thumb kartlar için ek boyut düzenlemeleri */
@media (min-width: 1500px) {
    /* Sol/sağ thumb kolonları - tam yükseklik */
    .panel-page-main .col-md-8 > .row > .col-lg-3 {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }

    #leftList,
    #rightList {
        display: flex !important;
        flex-direction: column;
        flex: 1 1 auto;
        gap: 16px !important;
    }

    #leftList .thumb-card,
    #rightList .thumb-card {
        height: calc(30% - 8px);
    }

    /* Alt detay kutuları */
    .person-detail-section {
        max-height: 155px;
        overflow: hidden;
        margin-top: 4px !important;
    }

    .person-detail-section .row.pt-3 {
        padding-top: 4px !important;
    }

    /* Tab bar altta sabit */
    .right-panel-card .right-tabs-bar {
        flex-shrink: 0;
    }
}

/* ───── Chart Skeleton / Shimmer ───── */
.chart-skeleton-svg {
    width: 100%;
    height: auto;
    opacity: 0.7;
}

.chart-shimmer {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 24px;
    width: 100%;
}

.chart-shimmer--tabs {
    max-width: 280px;
    margin: 0 auto;
}

.chart-shimmer__line {
    height: 14px;
    border-radius: 7px;
    background: linear-gradient(90deg, #e8e8e8 25%, #f5f5f5 50%, #e8e8e8 75%);
    background-size: 200% 100%;
    animation: chartShimmer 1.5s ease-in-out infinite;
}

.chart-shimmer__line--short {
    width: 60%;
}

.chart-shimmer__line--medium {
    width: 80%;
}

.chart-shimmer__line--long {
    width: 100%;
}

@keyframes chartShimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

.btn--loading {
    pointer-events: none;
    opacity: 0.7;
    cursor: not-allowed;
}

.transit-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: transit-spin 0.6s linear infinite;
    vertical-align: -2px;
}

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

/* Dark mode shimmer */
[data-theme="dark"] .chart-shimmer__line {
    background: linear-gradient(90deg, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%);
    background-size: 200% 100%;
}

[data-theme="dark"] .chart-skeleton-svg stop:nth-child(1),
[data-theme="dark"] .chart-skeleton-svg stop:nth-child(3) {
    stop-color: #2a2a2a;
}

[data-theme="dark"] .chart-skeleton-svg stop:nth-child(2) {
    stop-color: #3a3a3a;
}

.panel-toast-wrapper {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 2080;
    padding: 0;
}