/* ==========================================================================
   theme-v2.css — psikoloji.app tasarım sistemi katmanı
   --------------------------------------------------------------------------
   Bu dosya app.css / custom.css / landing.css'ten SONRA yüklenir ve
   arayüzün "dil birliğini" tek noktadan kurar.

   Tasarım kararları:
   - Marka rengi korunur: --primary (DB > theme_colors > #4f69d9) olduğu gibi
     kullanılır. Hiçbir yerde yeni bir marka rengi uydurulmaz.
   - Hover'da RENK DEĞİŞMEZ, sadece koyulaşır. Eski temada --primary mavi
     yapılmış ama --primary-hover yeşil (#1fb354) kalmıştı; bu yüzden
     butonlar hover'da yeşile dönüyordu. Burada hover artık
     filter: brightness() ile üretiliyor → ton kayması matematiksel olarak
     imkânsız.
   - Tek şekil dili: pill yarıçap, 600 ağırlık, yumuşak yüzey, ince kenarlık.
   ========================================================================== */

:root {
    /* --- Marka (mevcut değişkenlerden türetilir, üzerine yazmaz) --- */
    --pa-primary: var(--primary, #4f69d9);
    --pa-ink: #16181d;
    --pa-ink-700: #3d4250;
    --pa-ink-500: #6b7280;
    --pa-ink-400: #9aa0ac;

    /* --- Yüzeyler --- */
    --pa-surface: #ffffff;
    --pa-surface-alt: #f7f8fa;
    --pa-surface-sunken: #fafbfc;
    --pa-border: #e6e8ee;
    --pa-border-strong: #d3d7e0;

    /* --- Yarıçap --- */
    --pa-radius-sm: 10px;
    --pa-radius-md: 14px;
    --pa-radius-lg: 20px;
    --pa-radius-pill: 999px;

    /* --- Gölge --- */
    --pa-shadow-1: 0 1px 2px rgba(22, 24, 29, .04), 0 1px 3px rgba(22, 24, 29, .06);
    --pa-shadow-2: 0 4px 12px rgba(22, 24, 29, .06), 0 2px 4px rgba(22, 24, 29, .04);
    --pa-shadow-3: 0 12px 32px rgba(22, 24, 29, .10), 0 4px 8px rgba(22, 24, 29, .04);

    /* --- Hareket --- */
    --pa-ease: cubic-bezier(.4, 0, .2, 1);
    --pa-dur: .18s;
}

/* ==========================================================================
   1) HOVER TON KAYMASI DÜZELTMESİ
   Tema renkleri DB'den sadece --primary / --primary-border olarak geliyor.
   Hover değişkenleri eski yeşil temadan kalmıştı; hepsini marka renginden
   türetiyoruz.
   ========================================================================== */
:root {
    --primary-hover: var(--primary, #4f69d9);
    --primary-border-hover: var(--primary-border, #6777ef);
    --primary-btn-color-hover: #fff;
    --primary-btn-shadow: none;
    --primary-btn-shadow-hover: none;
    --secondary-btn-shadow: none;
    --secondary-btn-shadow-hover: none;
}

/* ==========================================================================
   2) BUTONLAR — tek şekil dili
   ========================================================================== */
.btn {
    border-radius: var(--pa-radius-pill);
    font-weight: 600;
    letter-spacing: .01em;
    line-height: 1.25;
    padding: .72rem 1.5rem;
    border-width: 1px;
    box-shadow: none;
    transition: filter var(--pa-dur) var(--pa-ease),
                transform var(--pa-dur) var(--pa-ease),
                background-color var(--pa-dur) var(--pa-ease),
                border-color var(--pa-dur) var(--pa-ease),
                color var(--pa-dur) var(--pa-ease);
    will-change: transform;
}

.btn:hover {
    /* Ton kaymasız koyulaşma: hue sabit kalır. */
    filter: brightness(.93);
    transform: translateY(-1px);
    box-shadow: none;
}

.btn:active,
.btn:not(:disabled):not(.disabled):active {
    filter: brightness(.88);
    transform: translateY(0);
    box-shadow: none;
}

.btn:focus,
.btn.focus,
.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(79, 105, 217, .22);
}

.btn.disabled,
.btn:disabled {
    filter: none;
    transform: none;
    opacity: .55;
    box-shadow: none;
}

/* Boyutlar */
.btn-lg { padding: .95rem 2rem; font-size: 1rem; }
.btn-sm { padding: .5rem 1.1rem; font-size: .8125rem; }
.btn-xs { padding: .3rem .8rem; font-size: .75rem; }

/* --- Varyantlar ------------------------------------------------------- */

/* Birincil eylem — marka rengi */
.btn-primary,
.btn-behance-blue {
    background-color: var(--pa-primary);
    border-color: var(--pa-primary);
    color: #fff;
    box-shadow: none;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-behance-blue:hover, .btn-behance-blue:focus, .btn-behance-blue:active {
    background-color: var(--pa-primary);
    border-color: var(--pa-primary);
    color: #fff;
    box-shadow: none;
}

.btn-primary:focus, .btn-behance-blue:focus {
    box-shadow: 0 0 0 4px rgba(79, 105, 217, .22);
}

/* İkincil eylem — koyu mürekkep */
.btn-secondary {
    background-color: var(--secondary, #1f3b64);
    border-color: var(--secondary, #1f3b64);
    color: #fff;
    box-shadow: none;
}

.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active,
.btn-secondary:not(:disabled):not(.disabled):active {
    background-color: var(--secondary, #1f3b64);
    border-color: var(--secondary, #1f3b64);
    color: #fff;
    box-shadow: none;
}

/* Yumuşak / üçüncül eylem */
.btn-soft,
.btn-behance-light {
    background-color: var(--pa-surface-alt);
    border-color: var(--pa-border);
    color: var(--pa-ink);
}

.btn-soft:hover,
.btn-behance-light:hover,
.btn-behance-light:focus {
    background-color: #eef0f4;
    border-color: var(--pa-border-strong);
    color: var(--pa-ink);
}

/* Çerçeveli */
.btn-outline-primary {
    background-color: transparent;
    border-color: var(--pa-primary);
    color: var(--pa-primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    background-color: var(--pa-primary);
    border-color: var(--pa-primary);
    color: #fff;
}

/* Ana sayfa hero'sundaki eski özel buton — sisteme bağlanır */
.btn.solid-btn {
    background-color: var(--pa-primary);
    border-color: var(--pa-primary);
    color: #fff;
    border-radius: var(--pa-radius-pill);
    box-shadow: none;
}

.btn.solid-btn:hover {
    background-color: var(--pa-primary);
    border-color: var(--pa-primary);
    color: #fff;
}

/* Anlamsal renkler korunur, sadece şekil dili hizalanır */
.btn-success, .btn-danger, .btn-warning, .btn-info {
    box-shadow: none;
}
.btn-success:hover, .btn-danger:hover, .btn-warning:hover, .btn-info:hover {
    box-shadow: none;
}

/* rounded-pill zaten varsayılan; eski işaretlemeyi zararsız kılar */
.btn.rounded-pill { border-radius: var(--pa-radius-pill) !important; }

/* ==========================================================================
   3) FORM ELEMANLARI
   ========================================================================== */
.form-control,
.custom-select {
    height: auto;
    min-height: 52px;
    padding: .85rem 1.1rem;
    font-size: .9375rem;
    color: var(--pa-ink);
    background-color: var(--pa-surface-sunken);
    border: 1px solid var(--pa-border);
    border-radius: var(--pa-radius-md);
    box-shadow: none;
    transition: border-color var(--pa-dur) var(--pa-ease),
                box-shadow var(--pa-dur) var(--pa-ease),
                background-color var(--pa-dur) var(--pa-ease);
}

textarea.form-control {
    min-height: 120px;
    line-height: 1.6;
}

.form-control::placeholder { color: var(--pa-ink-400); }

.form-control:hover:not(:focus):not([readonly]) {
    border-color: var(--pa-border-strong);
}

.form-control:focus,
.custom-select:focus {
    background-color: var(--pa-surface);
    border-color: var(--pa-primary);
    box-shadow: 0 0 0 4px rgba(79, 105, 217, .14);
    outline: none;
}

.form-control.is-invalid,
.form-control.is-invalid:focus {
    border-color: var(--danger, #f63c3c);
    background-color: #fff7f7;
}

.form-control.is-invalid:focus {
    box-shadow: 0 0 0 4px rgba(246, 60, 60, .14);
}

.invalid-feedback {
    font-size: .8125rem;
    margin-top: .4rem;
}

.input-label {
    display: block;
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--pa-ink-700);
    margin-bottom: .5rem;
}

.form-group { margin-bottom: 1.25rem; }

/* Şifre göster/gizle gibi input-group butonları.
   Yukarıdaki .btn kuralları (pill yarıçap, hover'da translateY) grup içinde
   bozulmaya yol açıyordu: alan ve buton iki ayrı yuvarlak kutu gibi duruyor,
   yükseklikleri tutmuyor ve buton hover'da yerinden oynuyordu. Grup tek bir
   yüzey gibi davranmalı: dıştaki köşeler yuvarlak, birleşme yeri düz. */
.input-group > .form-control:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group > .form-control:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.input-group .input-group-prepend .btn,
.input-group .input-group-append .btn,
.input-group .input-group-text {
    display: flex;
    align-items: center;
    padding: 0 1rem;
    font-weight: 500;
    border: 1px solid var(--pa-border);
    border-radius: 0;
    box-shadow: none;
}

/* .input-group-text'in rengi app.css'te --secondary ile !important olarak
   veriliyor (ve içindeki metin .text-white); yüzey rengi yalnızca butonlara
   verilir, yoksa koyu ek üzerinde beyaz metin okunmaz olur. */
.input-group .input-group-prepend .btn,
.input-group .input-group-append .btn {
    background-color: var(--pa-surface-sunken);
    color: var(--pa-ink-500);
}

.input-group .input-group-append .btn,
.input-group .input-group-append .input-group-text {
    border-left: none;
    border-top-right-radius: var(--pa-radius-md);
    border-bottom-right-radius: var(--pa-radius-md);
}

.input-group .input-group-prepend .btn,
.input-group .input-group-prepend .input-group-text {
    border-right: none;
    border-top-left-radius: var(--pa-radius-md);
    border-bottom-left-radius: var(--pa-radius-md);
}

.input-group .btn:hover,
.input-group .btn:active,
.input-group .btn:not(:disabled):not(.disabled):active {
    transform: none;
    filter: none;
    background-color: #eef0f4;
    color: var(--pa-ink);
}

/* Odak halkası tek tek parçalara değil, grubun tamamına verilir */
.input-group:focus-within {
    border-radius: var(--pa-radius-md);
    box-shadow: 0 0 0 4px rgba(79, 105, 217, .14);
}

.input-group:focus-within > .form-control {
    box-shadow: none;
}

.input-group:focus-within > .form-control,
.input-group:focus-within .input-group-prepend .btn,
.input-group:focus-within .input-group-append .btn,
.input-group:focus-within .input-group-text {
    border-color: var(--pa-primary);
}

.input-group .btn:focus {
    box-shadow: none;
}

/* Onay kutusu / radyo */
.custom-control-label { padding-top: 1px; }

.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--pa-primary);
    border-color: var(--pa-primary);
}

.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 4px rgba(79, 105, 217, .18);
}

/* select2 hizalaması */
.select2-container--default .select2-selection--single {
    min-height: 52px;
    border: 1px solid var(--pa-border);
    border-radius: var(--pa-radius-md);
    background-color: var(--pa-surface-sunken);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 50px;
    padding-left: 1.1rem;
    color: var(--pa-ink);
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 50px;
}

/* ==========================================================================
   4) SEKMELER (nav-pills)
   ========================================================================== */
.tabs .nav-pills,
.nav-pills.pa-tabs {
    display: inline-flex;
    gap: .25rem;
    padding: .3rem;
    background-color: var(--pa-surface-alt);
    border: 1px solid var(--pa-border);
    border-radius: var(--pa-radius-pill);
}

.tabs .nav-pills .nav-item,
.nav-pills.pa-tabs .nav-item { margin: 0; }

.tabs .nav-pills .nav-link,
.nav-pills.pa-tabs .nav-link {
    border-radius: var(--pa-radius-pill);
    padding: .55rem 1.25rem;
    font-size: .875rem;
    font-weight: 600;
    color: var(--pa-ink-500);
    background-color: transparent;
    border: none;
    transition: color var(--pa-dur) var(--pa-ease),
                background-color var(--pa-dur) var(--pa-ease);
}

.tabs .nav-pills .nav-link:hover,
.nav-pills.pa-tabs .nav-link:hover {
    color: var(--pa-ink);
}

.tabs .nav-pills .nav-link.active,
.nav-pills.pa-tabs .nav-link.active {
    background-color: var(--pa-ink);
    color: #fff;
    box-shadow: var(--pa-shadow-1);
}

/* ==========================================================================
   5) KARTLAR
   ========================================================================== */
.pa-card {
    background-color: var(--pa-surface);
    border: 1px solid var(--pa-border);
    border-radius: var(--pa-radius-lg);
    box-shadow: var(--pa-shadow-1);
    transition: box-shadow var(--pa-dur) var(--pa-ease),
                transform var(--pa-dur) var(--pa-ease);
}

.pa-card:hover {
    box-shadow: var(--pa-shadow-2);
    transform: translateY(-2px);
}

/* Ana sayfadaki 4 hizmet kartı */
.stats-container .stats-item {
    background-color: var(--pa-surface);
    border: 1px solid var(--pa-border);
    border-radius: var(--pa-radius-lg);
    box-shadow: var(--pa-shadow-1);
    transition: box-shadow var(--pa-dur) var(--pa-ease),
                transform var(--pa-dur) var(--pa-ease),
                border-color var(--pa-dur) var(--pa-ease);
}

.stats-container .stats-item:hover {
    box-shadow: var(--pa-shadow-3);
    border-color: var(--pa-border-strong);
    transform: translateY(-4px);
}

.stats-container .stats-item .stat-icon-box {
    margin-bottom: .25rem;
}

.stats-container .stats-item .btn {
    min-width: 190px;
}

/* ==========================================================================
   6) AUTH EKRANLARI (login / register / forget-password)
   ========================================================================== */
.pa-auth {
    margin: 40px 0 90px;
}

.pa-auth__shell {
    display: flex;
    flex-wrap: wrap;
    background-color: var(--pa-surface);
    border: 1px solid var(--pa-border);
    border-radius: 28px;
    box-shadow: var(--pa-shadow-3);
    overflow: hidden;
}

/* Sol görsel paneli */
.pa-auth__aside {
    flex: 0 0 46%;
    max-width: 46%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 48px 44px;
    background: linear-gradient(155deg, #f3f5ff 0%, #eef1fd 45%, #e9edfb 100%);
}

.pa-auth__aside::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(520px 320px at 88% 8%, rgba(79, 105, 217, .16), transparent 62%),
        radial-gradient(420px 300px at 4% 96%, rgba(31, 59, 100, .12), transparent 60%);
    pointer-events: none;
}

.pa-auth__aside > * { position: relative; z-index: 1; }

.pa-auth__aside-title {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--secondary, #1f3b64);
    margin: 0 0 .6rem;
}

.pa-auth__aside-text {
    font-size: .9375rem;
    line-height: 1.65;
    color: var(--pa-ink-500);
    margin: 0;
    max-width: 42ch;
}

.pa-auth__art {
    width: 100%;
    max-width: 420px;
    height: auto;
    margin: 24px auto;
    display: block;
}

.pa-auth__points {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pa-auth__points li {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    font-size: .875rem;
    font-weight: 500;
    color: var(--pa-ink-700);
    margin-top: .7rem;
}

.pa-auth__points li svg {
    flex: 0 0 18px;
    margin-top: 1px;
}

/* Sağ form paneli */
.pa-auth__main {
    flex: 1 1 54%;
    max-width: 54%;
    padding: 56px 56px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.pa-auth__title {
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--pa-ink);
    margin: 0 0 .4rem;
}

.pa-auth__subtitle {
    font-size: .9375rem;
    color: var(--pa-ink-500);
    margin: 0 0 1.75rem;
}

.pa-auth__divider {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin: 1.75rem 0 1.25rem;
    color: var(--pa-ink-400);
    font-size: .8125rem;
    font-weight: 500;
}

.pa-auth__divider::before,
.pa-auth__divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: var(--pa-border);
}

.pa-auth__socials {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
}

/* Sosyal giriş butonları — buton diliyle aynı */
.social-login {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    min-height: 52px;
    padding: .7rem 1rem !important;
    border: 1px solid var(--pa-border);
    border-radius: var(--pa-radius-pill);
    background-color: var(--pa-surface);
    color: var(--pa-ink);
    font-size: .875rem;
    font-weight: 600;
    text-align: center;
    transition: background-color var(--pa-dur) var(--pa-ease),
                border-color var(--pa-dur) var(--pa-ease),
                transform var(--pa-dur) var(--pa-ease);
}

.social-login:hover {
    background-color: var(--pa-surface-alt);
    border-color: var(--pa-border-strong);
    color: var(--pa-ink);
    transform: translateY(-1px);
    text-decoration: none;
}

.social-login img {
    width: 18px;
    height: 18px;
    margin: 0 !important;
    flex: 0 0 18px;
}

.social-login span { flex: 0 1 auto !important; }

/* Doğrulama kodu alanı */
.form-control.pa-otp {
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: .5em;
    text-indent: .5em;
    padding-left: .5rem;
    padding-right: .5rem;
}

.pa-auth__foot {
    margin-top: 1.75rem;
    text-align: center;
    font-size: .875rem;
    color: var(--pa-ink-500);
}

.pa-auth__foot a {
    color: var(--pa-primary);
    font-weight: 600;
}

.pa-auth__foot a:hover { text-decoration: underline; }

.pa-auth__forgot {
    display: inline-block;
    margin-top: 1rem;
    font-size: .875rem;
    font-weight: 600;
    color: var(--pa-ink-500);
}

.pa-auth__forgot:hover { color: var(--pa-primary); }

/* Duyarlı davranış */
@media (max-width: 991.98px) {
    .pa-auth { margin: 16px 0 48px; }

    .pa-auth__shell {
        border-radius: 20px;
        box-shadow: var(--pa-shadow-2);
    }

    .pa-auth__aside {
        display: none;
    }

    .pa-auth__main {
        flex: 1 1 100%;
        max-width: 100%;
        padding: 36px 24px 32px;
    }

    .pa-auth__title { font-size: 1.5rem; }

    .pa-auth__socials { grid-template-columns: 1fr; }
}

@media (max-width: 575.98px) {
    .pa-auth__shell {
        border: none;
        box-shadow: none;
        background-color: transparent;
    }
    .pa-auth__main { padding: 24px 4px; }
}

/* Filtre panelleri (psikolog-bul sol sütun) */
.filters-container {
    background-color: var(--pa-surface);
    border: 1px solid var(--pa-border) !important;
    border-radius: var(--pa-radius-lg) !important;
    box-shadow: var(--pa-shadow-1) !important;
    padding: 1.25rem !important;
}

.filters-container .category-filter-title {
    font-size: 1rem !important;
    font-weight: 700;
    color: var(--pa-ink) !important;
    margin-bottom: .25rem;
}

.filters-container label,
.filters-container .form-label {
    display: block;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--pa-ink-700);
    margin-bottom: .5rem;
}

.filters-container .form-control {
    min-height: 46px;
    padding: .65rem .9rem;
    font-size: .875rem;
}

.filters-container .form-control:disabled {
    background-color: #f2f3f6;
    color: var(--pa-ink-400);
    cursor: not-allowed;
}

/* Harita ile ara kartı
   Eskiden Google Haritalar logosunun birebir kopyası olan 5,5 KB'lık inline
   SVG + raster arka plan + inline position:absolute kullanılıyordu. */
.pa-map-search {
    position: relative;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .85rem 1rem;
    margin-bottom: 1.25rem;
    overflow: hidden;
    border: 1px solid var(--pa-border);
    border-radius: var(--pa-radius-md);
    background-color: var(--pa-surface-alt);
    color: var(--pa-ink);
    text-decoration: none;
    transition: border-color var(--pa-dur) var(--pa-ease),
                box-shadow var(--pa-dur) var(--pa-ease),
                transform var(--pa-dur) var(--pa-ease);
}

.pa-map-search:hover {
    border-color: var(--pa-primary);
    box-shadow: var(--pa-shadow-2);
    transform: translateY(-1px);
    text-decoration: none;
    color: var(--pa-ink);
}

.pa-map-search__art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .38;
    pointer-events: none;
}

/* Metnin arkasında okunabilirlik perdesi */
.pa-map-search::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(247,248,250,.94) 0%, rgba(247,248,250,.80) 55%, rgba(247,248,250,.35) 100%);
    pointer-events: none;
}

.pa-map-search__body {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.pa-map-search__title {
    font-size: .9375rem;
    font-weight: 700;
    line-height: 1.3;
}

.pa-map-search__hint {
    font-size: .75rem;
    color: var(--pa-ink-500);
    line-height: 1.35;
    margin-top: .15rem;
}

.pa-map-search__arrow {
    position: relative;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--pa-surface);
    border: 1px solid var(--pa-border);
    color: var(--pa-primary);
    transition: background-color var(--pa-dur) var(--pa-ease),
                color var(--pa-dur) var(--pa-ease);
}

.pa-map-search:hover .pa-map-search__arrow {
    background-color: var(--pa-primary);
    border-color: var(--pa-primary);
    color: #fff;
}

/* Uzman listesi kartı (psikolog-bul) */
.instructor-finder .instructor-finder-card {
    background-color: var(--pa-surface);
    border: 1px solid var(--pa-border) !important;
    border-radius: var(--pa-radius-lg) !important;
    box-shadow: var(--pa-shadow-1);
    transition: box-shadow var(--pa-dur) var(--pa-ease),
                border-color var(--pa-dur) var(--pa-ease),
                transform var(--pa-dur) var(--pa-ease);
}

.instructor-finder .instructor-finder-card:hover {
    box-shadow: var(--pa-shadow-2);
    border-color: var(--pa-border-strong) !important;
    transform: translateY(-2px);
}

.instructor-finder .instructor-finder-card h3 {
    transition: color var(--pa-dur) var(--pa-ease);
}

.instructor-finder .instructor-finder-card a:hover h3 {
    color: var(--pa-primary) !important;
}

/* Uzmanlık etiketleri — buton değil, etiket gibi okunmalı.
   Kategori adları çok uzun olabildiği için (soru cümlesi biçiminde) pill
   sabit yükseklikte kalmamalı: metin sarmalanır, yükseklik içeriğe uyar. */
.instructor_occ_blck .btn-xs {
    display: inline-block;
    max-width: 100%;
    padding: .28rem .7rem;
    font-size: .75rem;
    font-weight: 500;
    line-height: 1.4;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    height: auto;
    text-align: left;
    vertical-align: top;
    background-color: var(--pa-surface-alt);
    border-color: var(--pa-border);
    color: var(--pa-ink-700);
}

.instructor_occ_blck {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    min-width: 0;
}

.instructor_occ_blck .btn-xs { margin: 0 !important; }

.instructor_occ_blck .btn-xs:hover {
    background-color: #eef1fd;
    border-color: #dfe4fb;
    color: var(--pa-primary);
    transform: none;
}

/* Bitişik buton grubu: pill uçlar korunur, ortadaki köşeler düzleşir */
.btn-group.rounded-pill > .btn:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.btn-group.rounded-pill > .btn:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.btn-group > .btn:hover {
    transform: none;
    z-index: 2;
}

/* ==========================================================================
   7) UZMAN TANITIM VİDEOSU MODALI
   ========================================================================== */
.pa-video-modal .modal-content {
    border: none;
    border-radius: var(--pa-radius-lg);
    overflow: hidden;
    background-color: var(--pa-surface);
    box-shadow: 0 24px 64px rgba(22, 24, 29, .32);
}

.pa-video-modal .modal-dialog { max-width: 720px; }

.pa-video-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--pa-border);
}

.pa-video-modal__who {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
}

.pa-video-modal__avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 44px;
}

.pa-video-modal__meta { min-width: 0; }

.pa-video-modal__name {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--pa-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pa-video-modal__role {
    display: block;
    font-size: .8125rem;
    color: var(--pa-ink-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pa-video-modal__close {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background-color: var(--pa-surface-alt);
    color: var(--pa-ink-500);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--pa-dur) var(--pa-ease),
                color var(--pa-dur) var(--pa-ease);
}

.pa-video-modal__close:hover {
    background-color: #e7e9ef;
    color: var(--pa-ink);
}

/* 16:9 oran koruyucu — video hiçbir ekranda ezilmez */
.pa-video-frame {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    background-color: #000;
}

.pa-video-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.pa-video-modal__foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .6rem;
    padding: 1rem 1.25rem;
}

@media (max-width: 767.98px) {
    .pa-video-modal .modal-dialog {
        max-width: 100%;
        margin: 0;
        min-height: 100%;
        align-items: stretch;
    }

    .pa-video-modal .modal-content {
        border-radius: 0;
        min-height: 100vh;
        justify-content: center;
    }

    .pa-video-modal__foot { justify-content: stretch; }
    .pa-video-modal__foot .btn { flex: 1; }
}

/* Avatar üzerindeki oynat düğmesi */
.profile-video-container .profile-video-play-button,
.js-profile-video {
    cursor: pointer;
}

.instructor-avatar .js-profile-video {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: rgba(22, 24, 29, .58);
    backdrop-filter: blur(2px);
    color: #fff;
    border: 2px solid rgba(255, 255, 255, .9);
    transition: background-color var(--pa-dur) var(--pa-ease),
                transform var(--pa-dur) var(--pa-ease);
    z-index: 2;
}

.instructor-avatar .js-profile-video:hover {
    background-color: var(--pa-primary);
    transform: translate(-50%, -50%) scale(1.08);
}

.instructor-avatar .js-profile-video svg,
.instructor-avatar .js-profile-video .feather {
    stroke: #fff;
    fill: #fff;
    margin-left: 2px;
}

/* Yıkıcı ama ikincil eylem (ör. sepeti temizle) — kırmızı dolgu fazla ağır kalıyor */
.btn-ghost-danger {
    background-color: transparent;
    border-color: transparent;
    color: var(--danger, #f63c3c);
}

.btn-ghost-danger:hover,
.btn-ghost-danger:focus {
    background-color: #fdeeee;
    border-color: #fbdcdc;
    color: var(--danger, #f63c3c);
}

/* ==========================================================================
   9) SEPET & ÖDEME
   ========================================================================== */

/* Banner: 400px'lik yarım daire kavis yerine yumuşak modern yüzey */
.cart-banner {
    padding: 56px 0 !important;
    background-color: var(--pa-surface-alt) !important;
    border-bottom: 1px solid var(--pa-border) !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.cart-banner h1 {
    font-size: 2.25rem !important;
    letter-spacing: -.02em;
}

.cart-banner .payment-hint {
    margin-top: 12px !important;
    color: var(--pa-ink-500);
}

/* Sepet / özet kartları — eski "rounded-sm shadow" yüzeyi */
.cart-banner + .container .rounded-sm.shadow,
.container section > .rounded-sm.shadow {
    border: 1px solid var(--pa-border);
    border-radius: var(--pa-radius-lg) !important;
    box-shadow: var(--pa-shadow-1) !important;
    background-color: var(--pa-surface);
}

.cart-actions {
    gap: .6rem;
}

.cart-checkout-item {
    border-bottom-color: var(--pa-border) !important;
    padding: 14px 0 !important;
}

.cart-checkout-item h4 {
    margin-bottom: 0;
    color: var(--pa-ink-700) !important;
}

/* Toplam satırı vurgulanır */
.cart-checkout-item.border-0 h4,
.cart-checkout-item.border-0 span {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: var(--pa-ink) !important;
}

/* Sepet satırındaki silme düğmesi */
.btn-cart-list-delete {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #fdeeee !important;
    transition: background-color var(--pa-dur) var(--pa-ease);
}

.btn-cart-list-delete svg,
.btn-cart-list-delete .feather {
    stroke: var(--danger, #f63c3c) !important;
    color: var(--danger, #f63c3c) !important;
}

.btn-cart-list-delete:hover {
    background-color: #fbdcdc !important;
}

/* Ödeme yöntemi seçim kartları */
.charge-account-radio label {
    border: 1px solid var(--pa-border) !important;
    border-radius: var(--pa-radius-lg) !important;
    background-color: var(--pa-surface);
    cursor: pointer;
    transition: border-color var(--pa-dur) var(--pa-ease),
                box-shadow var(--pa-dur) var(--pa-ease),
                transform var(--pa-dur) var(--pa-ease);
}

.charge-account-radio label:hover {
    border-color: var(--pa-border-strong) !important;
    box-shadow: var(--pa-shadow-2);
    transform: translateY(-2px);
}

.charge-account-radio input:checked + label {
    border-color: var(--pa-primary) !important;
    box-shadow: 0 0 0 3px rgba(79, 105, 217, .16), var(--pa-shadow-2);
}

.charge-account-radio input:focus-visible + label {
    outline: 2px solid var(--pa-primary);
    outline-offset: 2px;
}

/* ==========================================================================
   9b) İÇERİK SAYFALARI (/pages/*) VE BLOG YAZILARI
   ========================================================================== */

/* Başlık bandı. .text-light-green (#86aae0) koyu zeminli eski banner için
   seçilmişti; bandın yeni açık yüzeyinde kontrast 2,2:1'e düşüyor ve başlık
   neredeyse görünmez oluyordu. */
.cart-banner .text-light-green {
    color: var(--secondary, #1f3b64);
}

.cart-banner .intro-text {
    margin-bottom: 0;
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--pa-ink-500);
}

/* Gövde metni. Gövdenin satır yüksekliği 1.3; uzun düzyazı için fazla sıkışık
   kalıyor ve paragraflar tek blok gibi okunuyordu. */
.post-show {
    line-height: 1.75;
}

.post-show > p:first-child {
    margin-top: 0;
}

/* TinyMCE içerikleri bol miktarda boş <p> bırakıyor; her biri 15px boşluk
   üretip metnin arasını dağıtıyordu. */
.post-show p:empty {
    display: none;
}

.post-show h1,
.post-show h2,
.post-show h3,
.post-show h4 {
    font-size: 1.25rem;
    line-height: 1.35;
    color: var(--pa-ink);
    margin-top: 2rem;
    margin-bottom: .75rem;
}

.post-show ul,
.post-show ol {
    margin-bottom: 1rem;
    padding-left: 1.25rem;
}

.post-show a {
    color: var(--pa-primary);
}

.post-show a:hover {
    text-decoration: underline;
}

.post-show img,
.post-show iframe,
.post-show video {
    margin: 1rem 0;
}

/* Sayfa içi başlık listesi (indexH2List) */
.blog-index-list {
    background-color: var(--pa-surface-alt);
    border: 1px solid var(--pa-border);
    border-radius: var(--pa-radius-md);
}

.blog-index-list h2 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--pa-ink);
    margin-bottom: .5rem;
}

.blog-index-list ul {
    margin-bottom: 0;
    padding-left: 1.1rem;
}

.blog-index-list li {
    font-size: .875rem;
    line-height: 1.7;
}

/* ==========================================================================
   10) PANEL (kullanıcı / uzman paneli — admin panel HARİÇ)
   ========================================================================== */

.panel-sidebar {
    background-color: var(--pa-surface);
    border-right: 1px solid var(--pa-border);
    box-shadow: none;
}

.rtl .panel-sidebar {
    border-right: none;
    border-left: 1px solid var(--pa-border);
}

/* Kullanıcı kartı */
.panel-sidebar .user-info .user-avatar {
    border: 3px solid var(--pa-surface);
    box-shadow: var(--pa-shadow-2);
    overflow: hidden;
}

.panel-sidebar .user-info .user-name h3 {
    color: var(--pa-ink);
    letter-spacing: -.01em;
}

.panel-sidebar .sidebar-user-stats {
    border-bottom: 1px solid var(--pa-border);
}

.panel-sidebar .sidebar-user-stats .sidebar-user-stat-item strong {
    color: var(--pa-ink);
    font-weight: 700;
}

.panel-sidebar .sidebar-user-stats .sidebar-user-stat-item span {
    color: var(--pa-ink-500);
}

/* Menü öğeleri — referans tasarımdaki dolu pill dili */
.panel-sidebar .sidebar-menu .sidenav-item {
    padding: 2px 0;
    margin-bottom: 2px;
}

.panel-sidebar .sidebar-menu .sidenav-item > a {
    padding: .6rem .85rem;
    border-radius: var(--pa-radius-md);
    color: var(--pa-ink-700);
    transition: background-color var(--pa-dur) var(--pa-ease),
                color var(--pa-dur) var(--pa-ease);
}

.panel-sidebar .sidebar-menu .sidenav-item > a:hover {
    background-color: var(--pa-surface-alt);
    text-decoration: none;
}

.panel-sidebar .sidebar-menu .sidenav-item > a span {
    font-size: .875rem;
}

/* Aktif öğe: dolu koyu pill, ikon ve metin beyaz */
.panel-sidebar .sidebar-menu .sidenav-item.sidenav-item-active > a {
    background-color: var(--pa-ink);
    box-shadow: var(--pa-shadow-1);
}

.panel-sidebar .sidebar-menu .sidenav-item.sidenav-item-active > a,
.panel-sidebar .sidebar-menu .sidenav-item.sidenav-item-active > a * {
    color: #fff !important;
}

.panel-sidebar .sidebar-menu .sidenav-item.sidenav-item-active > a svg,
.panel-sidebar .sidebar-menu .sidenav-item.sidenav-item-active > a svg * {
    color: #fff !important;
    stroke: #fff !important;
}

/* Açılır alt menü */
.panel-sidebar .sidebar-menu .sidenav-item .collapse li a,
.panel-sidebar .sidebar-menu .sidenav-item .collapsing li a {
    display: block;
    padding: .38rem .85rem;
    border-radius: var(--pa-radius-sm);
    font-size: .8125rem;
    color: var(--pa-ink-500);
    transition: background-color var(--pa-dur) var(--pa-ease),
                color var(--pa-dur) var(--pa-ease);
}

.panel-sidebar .sidebar-menu .sidenav-item .collapse li a:hover {
    background-color: var(--pa-surface-alt);
    color: var(--pa-ink);
    text-decoration: none;
}

.panel-sidebar .sidebar-menu .sidenav-item .collapse li.active a {
    background-color: #eef1fd;
    color: var(--pa-primary);
    font-weight: 600;
}

/* İçerik alanı */
.panel-content {
    background-color: var(--panel-bg, #fbfbfd);
    padding: 28px 24px;
}

.panel-content .section-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--pa-ink);
    letter-spacing: -.01em;
}

.panel-section-card,
.activities-container {
    background-color: var(--pa-surface);
    border: 1px solid var(--pa-border);
    border-radius: var(--pa-radius-lg);
    box-shadow: var(--pa-shadow-1);
}

/* Panel anasayfasındaki karşılama kartı.
   panel.css'te .dashboard-banner mutlak konumlu ve 270px sabit yükseklikte.
   Okunmamış bildirim yoksa kartın içeriği kısalıyor, kart 270px'in altına
   düşüyor ve görsel kartın üstünden dışarı taşıyordu. Kart bir taban yükseklik
   alır, görsel de kartın içine sığdırılır. */
.dashboard-banner-container {
    overflow: hidden;
}

@media (min-width: 992px) {
    .dashboard-banner-container {
        min-height: 190px;
    }

    .dashboard-banner-container .dashboard-banner {
        top: 12px;
        bottom: 12px;
        height: auto;
    }

    .dashboard-banner-container .dashboard-banner img {
        width: auto;
        height: 100%;
        max-height: 100%;
        object-fit: contain;
    }
}

/* Panel tabloları */
.panel-content .custom-table {
    border-collapse: separate;
    border-spacing: 0;
}

.panel-content .custom-table thead th,
.panel-content .custom-table thead td {
    background-color: var(--pa-surface-alt);
    border: none;
    padding: .8rem 1rem;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--pa-ink-500);
    white-space: nowrap;
}

.panel-content .custom-table thead th:first-child { border-top-left-radius: var(--pa-radius-md); border-bottom-left-radius: var(--pa-radius-md); }
.panel-content .custom-table thead th:last-child  { border-top-right-radius: var(--pa-radius-md); border-bottom-right-radius: var(--pa-radius-md); }

.panel-content .custom-table tbody td {
    padding: .9rem 1rem;
    border-top: none;
    border-bottom: 1px solid var(--pa-border);
    font-size: .875rem;
    color: var(--pa-ink-700);
    vertical-align: middle;
}

.panel-content .custom-table tbody tr:last-child td { border-bottom: none; }

.panel-content .custom-table tbody tr {
    transition: background-color var(--pa-dur) var(--pa-ease);
}

.panel-content .custom-table tbody tr:hover {
    background-color: var(--pa-surface-sunken);
}

/* Geniş tablolar sayfayı yatay kaydırmasın */
.panel-content .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Adım göstergesi (profil / kurs oluşturma sihirbazı) */
.webinar-progress {
    border: 1px solid var(--pa-border);
    border-radius: var(--pa-radius-lg) !important;
    box-shadow: var(--pa-shadow-1) !important;
}

.webinar-progress .progress-icon {
    border: 1px solid var(--pa-border);
    background-color: var(--pa-surface-alt);
    transition: background-color var(--pa-dur) var(--pa-ease),
                border-color var(--pa-dur) var(--pa-ease);
}

.webinar-progress .progress-icon.active {
    background-color: #eef1fd;
    border-color: var(--pa-primary);
}

/* Panel alt aksiyon çubuğu */
.create-webinar-footer {
    border-top: 1px solid var(--pa-border) !important;
}

/* Mobil panel üst çubuğu */
.xs-panel-nav {
    background-color: var(--pa-surface);
    border-bottom: 1px solid var(--pa-border);
}

/* Hareket hassasiyeti */
@media (prefers-reduced-motion: reduce) {
    .btn,
    .pa-card,
    .stats-container .stats-item,
    .social-login {
        transition: none;
    }
    .btn:hover,
    .pa-card:hover,
    .stats-container .stats-item:hover,
    .social-login:hover {
        transform: none;
    }
}

/* ==========================================================================
   Logo — SVG sürümü
   --------------------------------------------------------------------------
   Marka logosu PNG'den SVG'ye taşındı. Yeni kilit (lockup) 2040x368, yani
   ~5,5:1; eski PNG 377x120, yani ~3,1:1 idi.

   Kritik nokta: logoyu taşıyan kutular `.img-cover` ile geliyor ve bu sınıf
   `object-fit: cover` uyguluyor. Cover, 5,5:1 bir görseli 3,4:1 bir kutuya
   yerleştirirken sağdan kırpar — yani ".app" kısmı kaybolurdu. Bu yüzden
   logo görsellerinde `contain`e geçiliyor ve kutu genişlikleri yeni orana
   göre büyütülüyor (yükseklik aynı kalıyor, logo dikeyde ortalanıyor).
   ========================================================================== */
.navbar-brand img,
.footer .footer-logo img,
.appHeader .pageTitle .logo,
.appHeader .pageTitle .whitelogo {
    object-fit: contain;
}

/* Üst menü — 170px'lik kutuda yeni oran çok küçük kalıyordu */
.navbar-brand {
    width: 190px;
    height: 50px;
}

@media (max-width: 767.98px) {
    .navbar-brand {
        width: 132px;
        max-width: 132px;
    }
}

.footer .footer-logo {
    width: 190px;
    height: 50px;
}

/* Mobil şablon üst çubuğu: max-height 45px yeni oranda ~250px genişlik
   demekti ve menü/avatar butonlarının üstüne biniyordu. */
.appHeader .pageTitle .logo,
.appHeader.scrolled .pageTitle .whitelogo {
    max-height: 34px;
    max-width: 100%;
}