/* yeni-all.css — 4 yeni-* shared CSS dosyası birleşik (head içinde tek link)
 * Yükleme sırası: header-top → bottom-nav → ms-base → yeni-shared
 * (Original header_yeni.php'deki link sırası ile aynı — cascade önemli)
 */

/* ═══ 1) header-top.css ═══ */
/* ═══════════════════════════════════════════════════════════════════
   header-top.css — header_yeni.php için stil
   Desktop: yatay nav
   Mobile:  top bar (logo + bell + hamburger) + drawer
   Bottom-nav (mobile) için bottom-nav.css ayrı
   ═══════════════════════════════════════════════════════════════════ */

/* Material Symbols Rounded (SVG sprite) — base */
.material-symbols-rounded {
    width: 1em;
    height: 1em;
    fill: currentColor;
    vertical-align: middle;
    display: inline-block;
    flex-shrink: 0;
}

/* Header fixed olduğu için altına içerik gizlenmesin diye spacer */
.hy-top-spacer {
    height: 68px;
    flex-shrink: 0;
}

/* Auto-hide top bar on scroll (Flutter defter_screen.dart pattern) */
.hy-top-d, .hy-top-m {
    transition: transform .2s ease-out;
    will-change: transform;
}
.hy-top-d.is-hidden,
.hy-top-m.is-hidden {
    transform: translateY(-100%);
}

/* ═══ DESKTOP TOP (hy-top-d) ═══ */
@media (min-width: 641px) {
    .hy-top-m { display: none !important; }
    /* Bottom nav sadece mobil — desktop'ta gizle */
    .bn-bar, .bn-spacer { display: none !important; }
}

/* Tablet 641-900px: drawer gizli (eski davranış) */
@media (min-width: 641px) and (max-width: 900px) {
    .hy-drawer, .hy-backdrop { display: none !important; }
}

/* ═══ DESKTOP ≥901px: drawer artık sol sidebar (persistent) ═══ */
@media (min-width: 901px) {
    .hy-backdrop { display: none !important; }
    .hy-drawer {
        position: fixed !important;
        top: 68px !important;          /* top bar altında */
        left: 0 !important;
        right: auto !important;
        bottom: 0 !important;
        width: 240px !important;
        max-width: 240px !important;
        transform: none !important;    /* slide-in'i iptal et */
        box-shadow: none !important;
        border-right: 0px solid #f0f0f0;
        z-index: 900 !important;       /* top bar'ın altında, slide-panel backdrop'un altında */
    }
    .hy-drawer-close { display: none !important; } /* desktop'ta kapat butonu yok */
    body { padding-left: 240px; }

    /* Top bar da sidebar alanını atlasın → içerik Bootstrap .container ile hizalanır */
    .hy-top-d { padding-left: 240px; }
    /* .hy-top-d-inner'daki özel max-width'i iptal et; Bootstrap .container devralsın */
    .hy-top-d-inner { max-width: none !important; padding: 0 15px !important; }
}

/* ≥1160px: 3-col shell, sidebar centering, header grid → ms-base.css'e taşındı */
@media (min-width: 1160px) {
    body { padding-left: 0; }
    .hy-top-d { padding-left: 0; }
}

@media (min-width: 641px) {
    .hy-top-d {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        background: #fff;
        border-bottom: 1px solid #f0f0f0;
        height: 68px;
        min-height: 68px;
    }
    .hy-top-d-inner {
        max-width: 1280px;
        margin: 0 auto;
        padding: 0 20px;
        height: 100%;
        display: flex;
        align-items: center;
        gap: 16px;
    }
    .hy-brand {
        display: inline-flex;
        align-items: center;
        flex-shrink: 0;
    }
    .hy-brand img { height: 42px; width: auto; display: block; }

    .hy-nav {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        margin-left: 12px;
    }
    .hy-link {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 12px;
/*        color: #6b7280;*/
        text-decoration: none;
        font-size: 15px;
        font-weight: 500;
        border-radius: var(--ms-radius-sm);
        position: relative;
        transition: all .15s;
        letter-spacing: -0.1px;
    }
    .hy-link:hover { color: #0f1111; background: #f5f5fa; text-decoration: none; }
    .hy-link.is-active { color: #0f1111; }
    .hy-link.is-active::after {
        content: '';
        position: absolute;
        left: 12px;
        right: 12px;
        bottom: -15px;
        height: 3px;
        background: #524f4f;
        border-radius: 0px 0px 0 0;
    }
    .hy-link .material-symbols-rounded { font-size: 22px; color: inherit; }
    /* Nav link içindeki badge (Mesajlar & Alarmlarım) — text'in sağ üst köşesi */
    .hy-link .hy-badge {
        position: absolute;
        top: 0px;
        right: -2px;
        margin-left: 0;
        border: 0px solid #fff;
    }

    .hy-top-d-right {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        flex-shrink: 0;
    }
    .hy-cta-primary, .hy-cta-secondary {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        height: 38px;
        padding: 0 16px;
        border-radius: var(--ms-radius-xs);
        font-size: 14px;
        font-weight: 500;
        text-decoration: none;
        transition: all .15s;
        border: none;
    }
    .hy-cta-primary { background: #ffca00; color: #0f1111; }
    .hy-cta-primary:hover { background: #e0b400; color: #0f1111; text-decoration: none; }
    .hy-cta-secondary { background: transparent; color: #0f1111; border: 1px solid #e5e7eb; }
    .hy-cta-secondary:hover { background: #f5f5fa; color: #0f1111; text-decoration: none; }
    .hy-cta-primary .material-symbols-rounded,
    .hy-cta-secondary .material-symbols-rounded { font-size: 18px; }

    /* Desktop bildirim butonu (oturumlu) */
    .hy-bell-d {
        position: relative;
        width: 40px;
        height: 40px;
        border-radius: var(--ms-radius-md);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #0f1111;
        text-decoration: none;
        transition: background .15s;
    }
    .hy-bell-d:hover { background: #f5f5fa; color: #0f1111; text-decoration: none; }
    .hy-bell-d .material-symbols-rounded { font-size: 22px; }
        .hy-badge {
        position: absolute;
                top: 2px;
        right: -2px;
        display: flex;
        justify-content: center;
        align-items: center;

        min-width: 16px;
        height: 16px;
        padding: 2px 2px;
        background: #ef4444;
        color: #fff;
        border-radius: var(--ms-radius-pill);
        font-size: 10px;
        font-weight: 700;
        line-height: 10px;
        text-align: center;
        border: 1px solid #fff;
        box-sizing: content-box;
        pointer-events: none;
    }
}

/* ═══ MOBILE TOP (hy-top-m) ═══ */
@media (max-width: 640px) {
    .hy-top-d { display: none !important; }

    /* Mobile drawer alt sınırı bottom-nav üstünde bitsin — içerik alttan kesilmesin */
    .hy-drawer {
        bottom: calc(68px + env(safe-area-inset-bottom, 0)) !important;
    }

    .hy-top-m {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        background: #fff;
        border-bottom: 1px solid #f0f0f0;
        height: 68px;
        min-height: 68px;
        display: flex;
        align-items: center;
        padding: 0 16px;
        gap: 8px;
        box-sizing: border-box;
    }
    .hy-brand-m {
        flex: 1;
        display: inline-flex;
        align-items: center;
        min-width: 0;
    }
    .hy-brand-m img {
        height: 46px;
        width: auto;
        max-width: 196px;
        object-fit: contain;
        display: block;
    }
    .hy-top-actions {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        flex-shrink: 0;
        /* Icon button edge compensation: 42x42 buton içinde 24x24 ikon → kenardan 9px transparent → margin -9 ile sağa kaydır → ikon görsel sağ kenarı 16px'de. */
        margin-right: -9px;
    }
    .hy-bell, .hy-menu-btn {
        width: 42px;
        height: 42px;
        border-radius: var(--ms-radius-circle);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        color: #0f1111;
        text-decoration: none;
        cursor: pointer;
        position: relative;
        transition: background .15s;
    }
    .hy-bell:hover, .hy-bell:focus,
    .hy-menu-btn:hover, .hy-menu-btn:focus {
        background: #f5f5fa;
        color: #0f1111;
        text-decoration: none;
        outline: none;
    }
    .hy-bell .material-symbols-rounded,
    .hy-menu-btn .material-symbols-rounded {
        font-size: 24px;
    }
    .hy-badge {
        position: absolute;
                top: 2px;
        right: -2px;
        display: flex;
        justify-content: center;
        align-items: center;

        min-width: 16px;
        height: 16px;
        padding: 0px 1px;
        background: #ef4444;
        color: #fff;
        border-radius: var(--ms-radius-pill);
        font-size: 10px;
        font-weight: 700;
        line-height: 10px;
        text-align: center;
        border: 2px solid #fff;
        box-sizing: content-box;
        pointer-events: none;
    }
}

/* ═══ DRAWER (mobile off-canvas) ═══ */
.hy-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1100;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}
.hy-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}

.hy-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 320px;
    max-width: 85vw;
    background: #fff;
    z-index: 1101;
    transform: translateX(100%);
    transition: transform .3s cubic-bezier(.4, 0, .2, 1);
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.08);
    overflow-y: auto;
}
.hy-drawer.open {
    transform: translateX(0);
}

.hy-drawer-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-bottom: 0px solid #f0f0f0;
    flex-shrink: 0;
}
/* Defter card paritesi: 42px avatar, 18/500 name, 14/400 sub */
.hy-drawer-logo,
.hy-drawer-logo-letter {
    width: 42px;
    height: 42px;
    border-radius: var(--ms-radius-circle);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.hy-drawer-logo {
    object-fit: cover;
    background: #F5F5FA;
}
.hy-drawer-logo-letter {
    background: #78909C;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.5px;
}
.hy-drawer-who {
    flex: 1;
    min-width: 0;
}
.hy-drawer-name {
    font-size: 18px;
    font-weight: 500;
    color: #0f1111;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0 0 2px;
}
.hy-drawer-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #0f1111;
    font-size: 14px;
    font-weight: 400;
}
.hy-drawer-badge img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}
.hy-drawer-close {
    width: 36px;
    height: 36px;
    border-radius: var(--ms-radius-circle);
    border: none;
    background: none;
    color: #0f1111;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.hy-drawer-close:hover { background: #f5f5fa; }
.hy-drawer-close .material-symbols-rounded { font-size: 28px; }

.hy-drawer-nav {
    flex: 1;
    padding: 0px 0 12px;
    overflow-y: auto;
}

/* Bölümler (kategori başlıkları) */
.hy-drawer-section {
    padding: 12px 0;
    border-top: 0px solid #f0f0f0;
}
.hy-drawer-section:first-child {
    border-top: none;
}
.hy-drawer-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #9ca3af;
    padding: 12px 18px 6px;
}

/* Menu item */
.hy-drawer-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 18px;
    color: #0f1111;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    transition: background .15s;
    letter-spacing: -0.1px;
}
.hy-drawer-item:hover {
    background: #f5f5fa;
    color: #0f1111;
    text-decoration: none;
}
.hy-drawer-item .material-symbols-rounded {
    font-size: 22px;
/*    color: #6b7280;*/
    flex-shrink: 0;
}
.hy-drawer-item-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hy-drawer-item-badge {

    
        display: flex;
    justify-content: center;
    align-items: center;
    min-width: 24px;
    height: 24px;
    /* padding: 4px 4px; */
    background: #ef4444;
    color: #fff;
    border-radius: var(--ms-radius-pill);
    font-size: 10px;
    font-weight: 700;
    line-height: 10px;
    text-align: center;
    border: 2px solid #fff;
    box-sizing: content-box;
    pointer-events: none;
}

/* Abonelik Paketleri vurgu (sarı accent) */
.hy-drawer-item.is-highlight {
    background: linear-gradient(90deg, #ffca00 0%, #ffca00 100%);
/*    color: #8b6914;*/
    font-weight: 600;
    margin: 8px 16px;
    border-radius: var(--ms-radius-xs);
}
.hy-drawer-item.is-highlight:hover {
    background: linear-gradient(90deg, #fff3a3 0%, #fff8dc 100%);
/*    color: #6b5010;*/
}
.hy-drawer-item.is-highlight .material-symbols-rounded {
/*    color: #8b6914;*/
}

/* Nakliyeci Defteri CTA — drawer is-highlight paritesi (yellow) — global, header + landing button */
.hy-defter-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    min-height: 40px;
    border-radius: var(--ms-radius-xs, 6px);
    background: linear-gradient(90deg, #ffca00 0%, #ffca00 100%);
    color: #0f1111;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s;
}
.hy-defter-cta:hover,
.hy-defter-cta:focus,
.hy-defter-cta:active {
    background: linear-gradient(90deg, #fff3a3 0%, #fff8dc 100%);
    color: #0f1111;
    text-decoration: none;
    outline: none;
}
.hy-defter-cta .material-symbols-rounded,
.hy-defter-cta svg {
    font-size: 18px;
    width: 18px;
    height: 18px;
}

/* Tehlike (Çıkış) */
.hy-drawer-item.is-danger {
    color: #dc2626;
}
.hy-drawer-item.is-danger .material-symbols-rounded {
    color: #dc2626;
}

.hy-drawer-divider {
    height: 1px;
    background: #f0f0f0;
    margin: 8px 0;
}

/* Scroll lock when drawer open */
body.hy-drawer-open {
    overflow: hidden;
}

/* Chat badge in bottom-nav Mesajlar — mevcut badge sistemi korunur */

/* Bootstrap 3 .container::before/::after clearfix → header flex layout'unda boş flex-item olarak yer kaplar; tüm sayfalarda iptal */
.hy-top-d .container::before,
.hy-top-d .container::after,
.hy-top-d-inner::before,
.hy-top-d-inner::after,
.hy-top-m::before,
.hy-top-m::after { content: none !important; display: none !important; }

/* ═══ 2) bottom-nav.css ═══ */
/* ============================================================
   bottom-nav.css
   Flutter uygulamasındaki alt navigasyon çubuğu PHP karşılığı.
   Beyaz zemin, koyu yazı — tarayıcı force-dark devre dışı.
   ============================================================ */

/* Font: sayfa zaten gnr_v6_13_min.css içinden Inter yüklüyor, tekrar import etmiyoruz */

/* color-scheme: light → tarayıcının sistem koyu modunu bu bileşene uygulamasını engeller */
.bn-bar,
.bn-bar * {
    color-scheme: light !important;
}

.bn-bar {
    position: fixed !important;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 6500;
    background: #FFFFFF !important;
    border-top: 1px solid #EAECF0;
    padding-bottom: env(safe-area-inset-bottom, 0);
    box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.02);
}

.bn-list {
    display: flex !important;
    align-items: stretch;
    justify-content: space-between;
    height: 68px;
    margin: 0;
    padding: 0 14px;
    list-style: none;
    background: #FFFFFF !important;
}

.bn-item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF !important;
}

.bn-link {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 100%;
    height: 100%;
    padding: 6px 2px 8px;
    color: #0F172A !important;
    background: transparent !important;
    text-decoration: none !important;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.2s ease;
    overflow: hidden;
    box-sizing: border-box;
}

.bn-link:hover,
.bn-link:focus-visible {
    outline: none;
    background-color: rgba(15, 23, 42, 0.06) !important;
}

.bn-icon-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 24px;
    flex-shrink: 0;
    background: transparent !important;
}

/* SVG sprite ikonu — ince outline stili, currentColor ile renklendir */
.bn-icon.material-symbols-rounded {
    width: 24px !important;
    height: 24px !important;
    fill: currentColor;
    color: #0F172A !important;
    vertical-align: middle;
    display: inline-block;
    flex-shrink: 0;
}

/* Aktif tab: outline kalır ama renk sarı */
.bn-link.is-active .bn-icon.material-symbols-rounded {
    color: #FFCA00 !important;
}

.bn-label {

    font-size: 11px !important;
    font-weight: 500;
    letter-spacing: -0.1px;
    color: #0F172A !important;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    line-height: 1.1;
}

.bn-link.is-active .bn-label {
    font-weight: 600;
}

.bn-badge {

            position: absolute;
    top: -6px;
    right: -4px;
        display: flex;
        justify-content: center;
        align-items: center;
        min-width: 16px;
        height: 16px;
       padding: 0px 1px;
        background: #ef4444;
        color: #fff;
        border-radius: 99px;
        font-size: 10px;
        font-weight: 700;
        line-height: 10px;
        text-align: center;
        border: 2px solid #fff;
        box-sizing: content-box;
        pointer-events: none;
}

.bn-spacer {
    height: calc(68px + env(safe-area-inset-bottom, 0));
}

@media (max-width: 359px) {
    .bn-label {
        font-size: 10px !important;
    }
    .bn-icon-wrap {
        width: 28px;
    }
    .bn-link.is-active .bn-icon-wrap {
        width: 40px;
    }
}

/* Desktop'ta da gizlenmesin; gizlemek istersen .bn-bar'a inline style="display:none" veya
   kendi max-width media query'nle override edebilirsin. */

/* ═══ 3) ms-base.css (override hy-drawer left calc — kazanan) ═══ */
/* ═══════════════════════════════════════════════════════════════════
   ms-base.css — Nakliyat Platformu shared design system
   Tüm sayfalar için ortak temel:
     1. Design tokens (colors, spacing, layout widths)
     2. 3-column page shell (.ms-shell + .ms-main + .ms-rail)
     3. Sidebar (.hy-drawer) merkezi konum + header grid alignment ≥1160px
   Kullanım: header_yeni.php tüm sayfalarda otomatik yükler.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Design tokens ─── */
:root {
    /* Renkler */
    --ms-fg: #0f1111;
    --ms-fg-secondary: #475467;
    --ms-fg-muted: #6B7280;
    --ms-border: #EAECF0;
    --ms-border-strong: #C3C5CA;
    --ms-bg: #FFFFFF;
    --ms-card-surface: #FFFFFF;
    --ms-chip-surface: #F5F5FA;
    --ms-yellow: #FFCA00;
    --ms-blue: #2563EB;
    --ms-pulse: #16A34A;
    --ms-danger: #EF4444;

    /* Spacing scale */
    --ms-space-4: 4px;
    --ms-space-8: 8px;
    --ms-space-12: 12px;
    --ms-space-16: 16px;
    --ms-space-24: 24px;

    /* Typography */
    --ms-font-sm: 14px;
    --ms-font-md: 15px;
    --ms-font-lg: 18px;

    /* Radius scale — uyumlu sistem (xs in-card kompakt UI, md primary surface) */
    --ms-radius-xs: 6px;        /* chip, tab, pill, in-card buton (Mesaj/Ara, Yayınla, Tümü, vs.) */
    --ms-radius-sm: 8px;        /* badge, mini element */
    --ms-radius-md: 12px;       /* input, kart, panel, drawer item */
    --ms-radius-lg: 16px;       /* modal, bottom sheet, büyük surface */
    --ms-radius-pill: 999px;    /* pill-shape (search input clear) */
    --ms-radius-circle: 50%;    /* avatar, dairesel ikon buton */

    /* Layout (3-col shell) */
    --ms-sidebar-w: 240px;
    --ms-main-w: 640px;
    --ms-rail-w: 280px;
    --ms-shell-w: 1160px;   /* 240 + 640 + 280 */
    --ms-header-h: 68px;
}

/* ─── 3-column page shell ─── */
/* Mobil/tablet: ms-rail gizli, ms-main full-width tek kolon (Bootstrap col-md-7 davranışıyla uyumlu) */
.ms-rail { display: none; }

@media (min-width: 1160px) {
    /* Bootstrap .container'ı 1160 ile sabitle (sayfa içeriği centered) */
    body .mcontent > .container {
        max-width: var(--ms-shell-w) !important;
        padding: 0 !important;
    }

    .ms-shell {
        display: grid;
        grid-template-columns: var(--ms-sidebar-w) var(--ms-main-w) var(--ms-rail-w);
        gap: 0;
        align-items: start;
    }

    .ms-main {
        grid-column: 2;
        width: 100%;
        max-width: none;
        flex: none;
    }

    .ms-rail {
        grid-column: 3;
        display: block;
        position: sticky;
        top: calc(var(--ms-header-h) + var(--ms-space-16));
        align-self: start;
        min-height: 200px;
        /* Üst padding 0 → ms-main ile aynı üst hiza; yan/alt padding 16 korunur */
        padding: 0 var(--ms-space-16) var(--ms-space-16);
        /* Rail içeriği viewport'tan uzunsa kendi içinde scroll olsun (Twitter pattern) */
        max-height: calc(100vh - var(--ms-header-h) - var(--ms-space-16));
        overflow-y: auto;
    }

    /* Sidebar (.hy-drawer) — merkezi 1160 container'ın sol ucuna oturur, viewport kenarına yapışmaz */
    .hy-drawer {
        left: calc((100vw - var(--ms-shell-w)) / 2) !important;
    }

    /* Header iç düzeni: logo / nav / CTAs sütunları ms-shell ile birebir hizalı */
    .hy-top-d-inner {
        display: grid !important;
        grid-template-columns: var(--ms-sidebar-w) var(--ms-main-w) var(--ms-rail-w);
        max-width: var(--ms-shell-w) !important;
        padding: 0 !important;
        gap: 0;
    }
    .hy-brand        { grid-column: 1; padding-left: var(--ms-space-16); }
    .hy-nav          { grid-column: 2; margin-left: 0; justify-content: center; }
    .hy-top-d-right  { grid-column: 3; justify-content: flex-end; padding-right: var(--ms-space-16); }
}

/* ─── Right-rail widget'ları (paylaşılan pattern: defter/talepler/pazaryeri için) ─── */
.ms-rail-widget {
    padding: var(--ms-space-16);
    border: 1px solid var(--ms-border);
    border-radius: var(--ms-radius-lg);
    margin-bottom: var(--ms-space-12);
    background: var(--ms-bg);
}
.ms-rail-widget-title {
    font-size: var(--ms-font-sm);
    font-weight: 600;
    color: var(--ms-fg);
    margin: 0 0 var(--ms-space-12);
    line-height: 1.2;
}
.ms-rail-widget-text {
    font-size: 14px;
    color: var(--ms-fg);
    margin: 0 0 var(--ms-space-12);
    line-height: 1.4;
}
.ms-rail-widget-list {
    display: flex;
    flex-direction: column;
    gap: var(--ms-space-12);
}
/* CTA variant — sarı bg */
.ms-rail-widget--cta {
    background: var(--ms-yellow);
    border-color: var(--ms-yellow);
}
.ms-rail-widget--cta .ms-rail-widget-title { font-size: 14px; }
.ms-rail-widget-cta-btn {
    display: inline-block;
    width: 100%;
    text-align: center;
    padding: 10px var(--ms-space-16);
    background: var(--ms-fg);
    color: #fff;
    border-radius: var(--ms-radius-md);
    font-size: var(--ms-font-sm);
    font-weight: 500;
    text-decoration: none;
    transition: background .15s;
}
.ms-rail-widget-cta-btn:hover { background: #1f2937; color: #fff; text-decoration: none; }
/* Listing item (thumb + meta) — pazaryeri ilanları, defter post'ları, vs. */
.ms-rail-listing {
    display: flex;
    gap: 10px;
    text-decoration: none;
    color: inherit;
    align-items: center;
}
.ms-rail-listing:hover { text-decoration: none; color: inherit; }
.ms-rail-listing-thumb {
    width: 60px;
    height: 60px;
    border-radius: var(--ms-radius-md);
    object-fit: cover;
    flex-shrink: 0;
    background: var(--ms-chip-surface);
    display: block;
}
.ms-rail-listing-meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    justify-content: center;
}
.ms-rail-listing-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--ms-fg);
    line-height: 1.3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.ms-rail-listing-price {
    font-size: 14px;
    font-weight: 600;
    color: var(--ms-blue);
}
/* Icon variant — kategori/servis listeleri için (transparent, object-fit:contain) */
.ms-rail-listing-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
    flex-shrink: 0;
    display: block;
}
.ms-rail-listing-sub {
    font-size: 12px;
    color: var(--ms-fg-muted);
    line-height: 1.3;
}

/* ─── Slide-panel (sağdan kayan modal panel) — paylaşılan pattern ─── */
.ms-slidepanel-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 17, 17, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1100;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}
.ms-slidepanel-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}
.ms-slidepanel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;                   /* mobil tam ekran */
    max-width: 100%;
    background: var(--ms-bg);
    z-index: 1101;
    transform: translateX(100%);
    transition: transform .28s cubic-bezier(.32, .72, 0, 1);  /* iOS spring */
    display: flex;
    flex-direction: column;
    box-shadow: -8px 0 32px rgba(15, 17, 17, 0.12);
    overflow: hidden;
}
@media (min-width: 768px) {
    .ms-slidepanel {
        width: 480px;
        max-width: 480px;
    }
}
.ms-slidepanel.is-open {
    transform: translateX(0);
}
.ms-slidepanel-header {
    display: flex;
    align-items: center;
    gap: var(--ms-space-12);
    padding: var(--ms-space-12) var(--ms-space-16);
    border-bottom: 1px solid var(--ms-border);
    flex-shrink: 0;
    background: var(--ms-bg);
}
.ms-slidepanel-title {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    color: var(--ms-fg);
    margin: 0;
}
.ms-slidepanel-close {
    width: 36px;
    height: 36px;
    border-radius: var(--ms-radius-circle);
    border: 0;
    background: transparent;
    color: var(--ms-fg);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .15s;
}
.ms-slidepanel-close:hover { background: var(--ms-chip-surface); }
.ms-slidepanel-close svg { width: 24px; height: 24px; fill: currentColor; }
.ms-slidepanel-body {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.ms-slidepanel-iframe {
    flex: 1;
    width: 100%;
    border: 0;
    display: block;
}
/* Body scroll-lock when panel açık */
body.ms-slidepanel-open {
    overflow: hidden;
}

/* ═══ 4) yeni-shared.css ═══ */
/**
 * yeni-shared.css — yeni-* sayfaların ortak page-shell kuralları
 *
 * Tüm yeni-*.php sayfaları header_yeni.php yüklediği için bu dosya
 * otomatik gelir. Daha önce her sayfada inline tekrar eden kurallar
 * (body padding, MnPd container border, dc-topbar, dc-toast) burada
 * konsolide edildi (49 sayfadan ~340 satır tasarruf).
 *
 * Component-spesifik stiller (defter-card.css), ms-base.css, ya da
 * sayfa-spesifik <style> blokları DEĞİŞMEDİ.
 */

/* ─── Page shell: body padding + col-md-7 container border ─── */
body { padding-top: 68px; }
.MnPd { padding: 0; }
body .col-md-7.MnPd {
    border-left: 1px solid var(--dc-border);
    border-right: 1px solid var(--dc-border);
    min-height: 100vh;
}
@media (max-width: 640px) {
    /* Tek standart 16px: Bootstrap container ve col-md-7 padding'i sıfır → section'lar 16px ile yönetir */
    body .mcontent > .container { padding: 0 !important; }
    body .col-md-7.MnPd { border-left: 0; border-right: 0; padding: 0 !important; }
}

/* ─── Ortak topbar (geri buton + sayfa başlığı) ─── */
.dc-topbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px 8px;
}
.dc-page-title {
    font-size: 24px;
    font-weight: 700;
    margin: 0;
    color: var(--dc-fg);
    flex: 1;
    line-height: 1;
}

/* ─── Ortak toast bildirimi ─── */
.dc-toast,
.yn-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--dc-fg);
    color: #fff;
    padding: 10px 18px;
    border-radius: var(--ms-radius-pill);
    font-size: 14px;
    z-index: 2100;
    opacity: 0;
    transition: opacity .2s;
    pointer-events: none;
}
.dc-toast.is-visible,
.yn-toast.is-visible { opacity: 1; }
.yn-toast.is-error { background: #DC2626; }


/* ═══════════════════════════════════════════════════════════════════
   tf-premium.css (premium iOS-feel form bileşenleri)
   yeni-all.css içine merge edildi (2026-05-08)
   tf-input, tf-btn, tf-field, tf-form sınıfları
   Kullanıldığı sayfalar: yeni-defter, yeni-ilan, yeni-ilan-ver, yeni-pazaryeri,
                          yeni-giris, yeni-uyeol, yeni-sifremi-unuttum, yeni-teklif-al
   ═══════════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════════
   tf-premium.css — Premium form/auth bileşenleri (iOS-feel)
   Kullanım: <link rel="stylesheet" href="/css/tf-premium.css?v=1">
   Ek: Flatpickr CDN (takvim için), Bootstrap CSS (header için, isteğe bağlı)
   ════════════════════════════════════════════════════════════════ */

/* ── Design tokens ── */
:root{
    --tf-ease: cubic-bezier(0.32, 0.72, 0, 1);
    --tf-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --tf-ease-fast: cubic-bezier(0.4, 0, 0.2, 1);
    --tf-dur: 280ms;
    --tf-dur-fast: 180ms;
    --tf-dur-slow: 400ms;
    --tf-color-primary: #ffca00;
    --tf-color-primary-hover: #e0b400;
    --tf-color-text: #0f1111;
    --tf-color-muted: #6b7280;
    --tf-color-placeholder: #9ca3af;
    --tf-color-border: #e5e7eb;
    --tf-color-border-hover: #d1d5db;
    --tf-color-bg-soft: #f3f4f6;
    --tf-color-bg-softer: #f9fafb;
    --tf-color-success: #10b981;
    --tf-color-success-dark: #059669;
    --tf-color-error: #ef4444;
}

/* ── Layout ── */
.tf-wrap{max-width:520px;margin:0 auto;padding:20px 16px 40px}
.tf-header{display:flex;align-items:center;gap:12px;margin-bottom:0}
.tf-header-content{flex:1}
.tf-title{font-size:32px;font-weight:700;color:var(--tf-color-text);margin-bottom:4px}
.tf-subtitle{font-size:16px;color:var(--tf-color-muted);margin-bottom:0}
.tf-progress{display:flex;gap:6px;margin-bottom:8px}
.tf-progress-bar{flex:1;height:4px;border-radius:2px;background:var(--tf-color-border);transition:background .3s}
.tf-progress-bar.active{background:var(--tf-color-text)}
.tf-gap-sm{height:8px}
.tf-gap-md{height:16px}
.tf-gap-lg{height:24px}
.tf-gap-xl{height:32px}
.tf-gap-xxl{height:64px}
@media(max-width:640px){.tf-wrap{padding:16px 14px 32px}}

/* ── Step transition (slide-in) ── */
.tf-step{display:none}
.tf-step.active{display:block;animation:tfStepIn var(--tf-dur-slow) var(--tf-ease-out)}
@keyframes tfStepIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
.step-hidden{display:none!important}

/* ── Section titles & labels ── */
.tf-section-title{font-size:16px;font-weight:500;color:var(--tf-color-text);margin-bottom:10px}
.tf-field-label{font-size:14px;font-weight:500;color:var(--tf-color-text);margin-bottom:6px}

/* ── Buttons (iOS-feel tap) ── */
.tf-btn{
    width:100%;height:56px;
    border:none;border-radius:12px;
    font-size:16px;font-weight:500;
    cursor:pointer;
    transition:transform var(--tf-dur-fast) var(--tf-ease-fast),
               background-color var(--tf-dur-fast) var(--tf-ease-fast),
               color var(--tf-dur-fast) var(--tf-ease-fast),
               opacity var(--tf-dur-fast) var(--tf-ease-fast),
               box-shadow var(--tf-dur-fast) var(--tf-ease-fast);
    display:flex;align-items:center;justify-content:center;gap:8px;
    -webkit-tap-highlight-color:transparent
}
.tf-btn:active:not(:disabled){transform:scale(.97)}
.tf-btn-primary{background:var(--tf-color-primary);color:var(--tf-color-text);box-shadow:0 1px 2px rgba(255,202,0,.25)}
.tf-btn-primary:hover{background:var(--tf-color-primary-hover);color:var(--tf-color-text)}
.tf-btn-primary:disabled{background:var(--tf-color-border-hover);color:var(--tf-color-placeholder);cursor:not-allowed;box-shadow:none}
.tf-btn-primary.loading{pointer-events:none;opacity:.7;position:relative}
.tf-btn-primary.loading::after{content:'';position:absolute;width:20px;height:20px;border:2px solid var(--tf-color-text);border-top-color:transparent;border-radius:50%;animation:tfspin .6s linear infinite;right:20px}
@keyframes tfspin{to{transform:rotate(360deg)}}
.tf-btn-back{
    width:42px;height:42px;min-width:42px;flex:0 0 42px;
    background:var(--tf-color-bg-soft);color:var(--tf-color-text);
    border:none;border-radius:50%;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:background-color var(--tf-dur-fast) var(--tf-ease-fast)
}
.tf-btn-back:hover{background:var(--tf-color-border)}
.tf-btn-back svg{width:20px;height:20px;fill:var(--tf-color-text)}
.tf-btn-link{background:none;border:none;color:var(--tf-color-text);font-size:15px;font-weight:500;cursor:pointer;padding:0;display:flex;align-items:center;gap:8px}
.tf-btn-link:hover{color:#0084ff}
.tf-btn-link svg{width:14px;height:14px;fill:currentColor}

/* ── Inputs (iOS feel) ── */
.tf-input{
    width:100%;height:56px;
    border:1px solid var(--tf-color-border);
    border-radius:8px;
    padding:0 16px;
    font-size:16px;color:var(--tf-color-text);
    background:#fff;outline:none;
    transition:border-color var(--tf-dur-fast) var(--tf-ease-fast),
               box-shadow var(--tf-dur-fast) var(--tf-ease-fast)
}
.tf-input:hover{border-color:var(--tf-color-border-hover)}
.tf-input:focus{border-color:var(--tf-color-text);box-shadow:0 0 0 4px rgba(15,17,17,.06)}
.tf-input::placeholder{color:var(--tf-color-placeholder)}
.tf-input:disabled{background:var(--tf-color-bg-softer);color:var(--tf-color-placeholder)}
.tf-input[readonly]{cursor:pointer;background:#fff}
/* Chrome autofill: border ve background'ı koru */
.tf-input:-webkit-autofill,
.tf-input:-webkit-autofill:hover,
.tf-input:-webkit-autofill:focus,
.tf-input:-webkit-autofill:active{
    -webkit-text-fill-color:var(--tf-color-text)!important;
    -webkit-box-shadow:0 0 0 1000px #fff inset!important;
    box-shadow:0 0 0 1000px #fff inset!important;
    border:1px solid var(--tf-color-border)!important;
    transition:background-color 5000s ease-in-out 0s
}
.tf-input:-webkit-autofill:focus{border:1px solid var(--tf-color-text)!important}

/* ── Floating Label (Material/iOS) ──
   HTML pattern:
   <div class="tf-float">
     <input type="text" class="tf-input" id="X" placeholder=" ">
     <label class="tf-float-label" for="X">Label</label>
   </div>
*/
.tf-float{position:relative}
.tf-float .tf-input{padding:0 16px}
.tf-float-label{
    position:absolute;
    top:50%;left:14px;
    transform:translateY(-50%);
    font-size:16px;color:var(--tf-color-placeholder);
    pointer-events:none;
    background:#fff;padding:0 4px;
    transition:transform var(--tf-dur) var(--tf-ease-out),
               color var(--tf-dur) var(--tf-ease-out),
               font-size var(--tf-dur) var(--tf-ease-out);
    line-height:1
}
.tf-float .tf-input:focus ~ .tf-float-label,
.tf-float .tf-input:not(:placeholder-shown) ~ .tf-float-label,
.tf-float.tf-float-active .tf-float-label{
    transform:translateY(-30px) scale(.78);
    transform-origin:left center;
    color:var(--tf-color-text);
    font-weight:500
}
.tf-float-helper{font-size:13px;color:var(--tf-color-placeholder);margin-top:6px;padding-left:4px}

/* ── Phone input (+90 prefix) ── */
.tf-phone-wrap{
    display:flex;align-items:center;
    border:1px solid var(--tf-color-border);border-radius:12px;
    background:#fff;height:56px;
    transition:border-color var(--tf-dur-fast) var(--tf-ease-fast),
               box-shadow var(--tf-dur-fast) var(--tf-ease-fast)
}
.tf-phone-wrap:focus-within{border-color:var(--tf-color-text);box-shadow:0 0 0 4px rgba(15,17,17,.06)}
.tf-phone-pre{padding:0 0 0 16px;font-size:16px;color:var(--tf-color-muted);font-weight:500;flex-shrink:0;line-height:56px;pointer-events:none;user-select:none}
.tf-phone-sep{width:1px;height:24px;background:var(--tf-color-border-hover);flex-shrink:0;margin:0 4px 0 12px}
.tf-phone-input{flex:1;border:none;outline:none;font-size:17px;color:var(--tf-color-text);background:transparent;padding:0 16px 0 12px;height:100%;border-radius:0 12px 12px 0;letter-spacing:0.5px}
.tf-phone-input::placeholder{color:var(--tf-color-placeholder)}

/* ── Password input (toggle visibility) ── */
.tf-pass-wrap{
    display:flex;align-items:center;
    border:1px solid var(--tf-color-border);border-radius:12px;
    background:#fff;height:56px;
    transition:border-color var(--tf-dur-fast) var(--tf-ease-fast),
               box-shadow var(--tf-dur-fast) var(--tf-ease-fast)
}
.tf-pass-wrap:focus-within{border-color:var(--tf-color-text);box-shadow:0 0 0 4px rgba(15,17,17,.06)}
.tf-pass-input{flex:1;border:none;outline:none;font-size:15px;color:var(--tf-color-text);background:transparent;padding:0 0 0 16px;height:100%;border-radius:12px}
.tf-pass-input::placeholder{color:var(--tf-color-placeholder)}
.tf-pass-toggle{background:none;border:none;padding:0 14px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--tf-color-muted)}
.tf-pass-toggle:hover{color:var(--tf-color-text)}
.tf-pass-toggle svg{width:20px;height:20px;fill:currentColor}

/* ── OTP (iOS halka focus) ── */
.otp-wrap{display:flex;gap:10px;justify-content:center;margin:24px 0 32px}
.otp-input{
    width:48px;height:56px;
    text-align:center;font-size:24px;font-weight:600;
    border:1px solid var(--tf-color-border);border-radius:12px;
    outline:none;color:var(--tf-color-text);
    transition:border-color var(--tf-dur-fast) var(--tf-ease-fast),
               box-shadow var(--tf-dur-fast) var(--tf-ease-fast),
               transform var(--tf-dur-fast) var(--tf-ease-fast)
}
.otp-input:focus{border-color:var(--tf-color-text);box-shadow:0 0 0 4px rgba(15,17,17,.08);transform:scale(1.04)}
.otp-timer{text-align:center;font-size:14px;color:var(--tf-color-muted);margin-top:32px}
.otp-resend{color:var(--tf-color-text);cursor:pointer;font-weight:500;text-decoration:underline}
.otp-resend.disabled{color:var(--tf-color-placeholder);pointer-events:none;text-decoration:none}

/* ── Cards (selection card, no layout shift) ── */
.tf-card{
    padding:16px 20px;
    border:1px solid var(--tf-color-border);border-radius:12px;
    cursor:pointer;background:#fff;
    transition:border-color var(--tf-dur) var(--tf-ease-out),
               box-shadow var(--tf-dur) var(--tf-ease-out),
               transform var(--tf-dur-fast) var(--tf-ease-fast);
    margin-bottom:10px;
    -webkit-tap-highlight-color:transparent
}
.tf-card:hover{border-color:rgba(15,17,17,.3);box-shadow:0 4px 12px rgba(0,0,0,.04)}
.tf-card:active{transform:scale(.99)}
.tf-card.selected{border-color:var(--tf-color-text);background:#fff;box-shadow:0 0 0 1px var(--tf-color-text) inset,0 4px 12px rgba(15,17,17,.08)}
.tf-card-row{display:flex;align-items:center;gap:16px}
.tf-card-icon{width:36px;height:36px;object-fit:contain}
.tf-card-title{font-size:16px;font-weight:600;color:var(--tf-color-text)}
.tf-card-sub{font-size:14px;color:var(--tf-color-muted);margin-top:2px}
.tf-card-check{
    width:22px;height:22px;border-radius:50%;
    border:2px solid var(--tf-color-border);
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
    transition:background-color var(--tf-dur) var(--tf-ease-out),
               border-color var(--tf-dur) var(--tf-ease-out)
}
.tf-card.selected .tf-card-check{background:var(--tf-color-text);border-color:var(--tf-color-text)}
.tf-card.selected .tf-card-check::after{
    content:"";display:block;width:14px;height:14px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='%23fff'%3E%3Cpath d='M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z'/%3E%3C/svg%3E");
    background-size:contain;background-repeat:no-repeat;background-position:center
}

/* ── Chips (multi-select pill / single-select) ── */
.tf-chip-row{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.tf-chip{
    flex:1;min-width:0;height:52px;
    display:flex;align-items:center;justify-content:center;
    border:1px solid var(--tf-color-border);border-radius:12px;
    font-size:14px;font-weight:500;color:var(--tf-color-text);
    cursor:pointer;background:#fff;padding:0 10px;text-align:center;
    transition:border-color var(--tf-dur) var(--tf-ease-out),
               box-shadow var(--tf-dur) var(--tf-ease-out),
               transform var(--tf-dur-fast) var(--tf-ease-fast);
    -webkit-tap-highlight-color:transparent
}
.tf-chip:hover{border-color:rgba(15,17,17,.3)}
.tf-chip:active{transform:scale(.97)}
.tf-chip.selected{border-color:var(--tf-color-text);background:#fff;box-shadow:0 0 0 1px var(--tf-color-text) inset}
.tf-chip-check{
    width:22px;height:22px;border-radius:50%;
    border:2px solid var(--tf-color-border);flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    transition:background-color var(--tf-dur) var(--tf-ease-out),border-color var(--tf-dur) var(--tf-ease-out);
    margin-right:6px
}
.tf-chip.selected .tf-chip-check{background:var(--tf-color-text);border-color:var(--tf-color-text)}
.tf-chip.selected .tf-chip-check::after{
    content:"";display:block;width:14px;height:14px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='%23fff'%3E%3Cpath d='M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z'/%3E%3C/svg%3E");
    background-size:contain;background-repeat:no-repeat;background-position:center
}

/* ── Select (native dropdown, custom arrow) ── */
.tf-select{
    width:100%;height:56px;
    border:1px solid var(--tf-color-border);border-radius:12px;
    padding:0 44px 0 16px;font-size:16px;color:var(--tf-color-text);
    background:#fff;
    appearance:none;-webkit-appearance:none;cursor:pointer;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='%236b7280'%3E%3Cpath d='M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 14px center;background-size:20px;
    transition:border-color var(--tf-dur-fast) var(--tf-ease-fast),
               box-shadow var(--tf-dur-fast) var(--tf-ease-fast)
}
.tf-select:focus{border-color:var(--tf-color-text);outline:0;box-shadow:0 0 0 4px rgba(15,17,17,.06)}
.tf-select:hover{border-color:var(--tf-color-border-hover)}
.tf-select option[value=""]{color:var(--tf-color-muted)}
.tf-select-row{display:flex;gap:8px}
.tf-select-row .tf-select{flex:1}

/* ── Textarea ── */
.tf-textarea{
    width:100%;min-height:120px;
    border:1px solid var(--tf-color-border);border-radius:12px;
    padding:14px 16px;font-size:16px;color:var(--tf-color-text);
    background:#fff;outline:none;resize:vertical;font-family:inherit;
    transition:border-color var(--tf-dur-fast) var(--tf-ease-fast),
               box-shadow var(--tf-dur-fast) var(--tf-ease-fast)
}
.tf-textarea:hover{border-color:var(--tf-color-border-hover)}
.tf-textarea:focus{border-color:var(--tf-color-text);box-shadow:0 0 0 4px rgba(15,17,17,.06)}
.tf-textarea::placeholder{color:var(--tf-color-placeholder)}

/* ── Photo grid + upload (drag-drop) ── */
.tf-photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:10px;margin-bottom:12px}
.tf-photo-item{position:relative;border-radius:12px;overflow:hidden;height:90px;background:var(--tf-color-bg-soft)}
.tf-photo-item img{width:100%;height:100%;object-fit:cover}
.tf-photo-delete{
    position:absolute;top:4px;right:4px;
    width:22px;height:22px;border-radius:50%;
    background:var(--tf-color-error);color:#fff;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;font-size:12px;border:none;
    transition:transform var(--tf-dur-fast) var(--tf-ease-fast)
}
.tf-photo-delete:active{transform:scale(.9)}
.tf-photo-add{
    height:90px;
    border:2px dashed var(--tf-color-border-hover);border-radius:12px;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;color:var(--tf-color-placeholder);
    transition:border-color var(--tf-dur) var(--tf-ease-out),color var(--tf-dur) var(--tf-ease-out)
}
.tf-photo-add:hover{border-color:var(--tf-color-text);color:var(--tf-color-text)}
.tf-photo-add svg{width:28px;height:28px}
.tf-photo-upload{
    width:100%;min-height:160px;
    border:2px dashed var(--tf-color-border-hover);border-radius:14px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    cursor:pointer;color:var(--tf-color-placeholder);
    background:var(--tf-color-bg-softer);gap:8px;padding:24px;
    transition:border-color var(--tf-dur) var(--tf-ease-out),
               background-color var(--tf-dur) var(--tf-ease-out),
               color var(--tf-dur) var(--tf-ease-out)
}
.tf-photo-upload:hover,.tf-photo-upload.dragover{border-color:var(--tf-color-text);background:var(--tf-color-bg-soft);color:var(--tf-color-text)}
.tf-photo-upload svg{width:40px;height:40px}
.tf-photo-upload span{font-size:14px;font-weight:500}
.tf-photo-upload small{font-size:12px;color:var(--tf-color-placeholder)}

/* ── Buttons (secondary variant) ── */
.tf-btn-secondary{background:var(--tf-color-bg-soft);color:var(--tf-color-text)}
.tf-btn-secondary:hover{background:var(--tf-color-border)}

/* ── Spinner (inline) ── */
.tf-spinner{display:inline-block;width:20px;height:20px;border:2px solid var(--tf-color-text);border-radius:50%;border-top-color:transparent;animation:tfspin .6s linear infinite}

/* ── Success ekranı ── */
.tf-success{text-align:center;padding:60px 0 40px}
.tf-success-icon{
    width:72px;height:72px;border-radius:50%;
    background:var(--tf-color-success);
    display:flex;align-items:center;justify-content:center;
    margin:0 auto;
    box-shadow:0 0 0 12px rgba(16,185,129,.12),0 0 0 24px rgba(16,185,129,.06)
}
.tf-success-icon svg{width:36px;height:36px;fill:#fff}
.tf-success-title{font-size:22px;font-weight:600;color:var(--tf-color-text);margin-top:32px}
.tf-success-desc{font-size:15px;color:var(--tf-color-muted);margin-top:12px;line-height:1.5}
.tf-success-redirect{font-size:14px;color:var(--tf-color-placeholder);margin-top:8px}

/* ── Snackbar (tek tip: siyah bg, beyaz yazı) ── */
.tf-snackbar{
    position:fixed;bottom:-80px;left:50%;
    transform:translateX(-50%);
    width:calc(100% - 32px);max-width:488px;
    min-height:56px;
    padding:12px 20px;border-radius:12px;
    font-size:14px;font-weight:500;color:#fff;
    z-index:9999;
    display:flex;align-items:center;gap:12px;
    box-sizing:border-box;
    transition:bottom .3s ease;
    box-shadow:0 4px 12px rgba(0,0,0,.15);
    background:var(--tf-color-text)
}
.tf-snackbar.tf-snack-error,
.tf-snackbar.tf-snack-success,
.tf-snackbar.tf-snack-warn,
.tf-snackbar.tf-snack-info{background:var(--tf-color-text);color:#fff}
.tf-snackbar.tf-snack-show{bottom:24px}
.tf-snackbar a{color:#fff;text-decoration:underline}
.tf-snack-icon{width:22px;height:22px;flex-shrink:0;fill:currentColor}
.tf-snack-text{flex:1}

/* ── Animated SVG Mark (.checkmark = success, .wmark = warning) ── */
.checkmark,.wmark{
    width:24px;height:24px;
    stroke-width:4;stroke:#fff;
    stroke-miterlimit:10;
    flex-shrink:0;fill:none
}
.checkmark__circle,.wmark__circle{
    stroke-dasharray:166;stroke-dashoffset:166;
    stroke-width:0;stroke:#fff;fill:none;
    animation:tfStroke .55s cubic-bezier(.65,0,.45,1) forwards
}
.checkmark__check{
    stroke-dasharray:48;stroke-dashoffset:48;
    stroke:#fff;stroke-linecap:round;stroke-linejoin:round;
    animation:tfStroke .35s cubic-bezier(.65,0,.45,1) .5s forwards
}
.wmark__check{
    stroke-dasharray:60;stroke-dashoffset:60;
    stroke:#fff;stroke-linecap:round;stroke-linejoin:round;
    animation:tfStroke .35s cubic-bezier(.65,0,.45,1) .5s forwards
}
@keyframes tfStroke{to{stroke-dashoffset:0}}

/* ════════════════════════════════════════════════════════════════
   Flatpickr Premium Theme (Airbnb-feel)
   Gerekli: <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr@4.6.13/dist/flatpickr.min.css">
   Bu blok flatpickr default stilini override eder.
   ════════════════════════════════════════════════════════════════ */
.flatpickr-calendar{
    border-radius:16px;border:none;
    box-shadow:0 8px 32px rgba(0,0,0,.10),0 2px 8px rgba(0,0,0,.04);
    padding:16px;width:320px;
    font-family:inherit;
    animation:fpFadeIn .25s var(--tf-ease-out)
}
@keyframes fpFadeIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.flatpickr-calendar.arrowTop:before,.flatpickr-calendar.arrowTop:after{display:none}
.flatpickr-months{padding:4px 8px 12px;align-items:center}
.flatpickr-month{height:auto;color:var(--tf-color-text)}
.flatpickr-current-month{font-size:16px;font-weight:600;padding:0;height:auto;display:flex;align-items:center;justify-content:center;gap:8px}
.flatpickr-current-month .cur-month{font-weight:600}
.flatpickr-current-month input.cur-year{font-weight:600;font-size:16px;padding:0 4px}
.flatpickr-current-month .numInputWrapper{width:auto}
.flatpickr-prev-month,.flatpickr-next-month{
    width:36px;height:36px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    color:var(--tf-color-text);fill:var(--tf-color-text);
    transition:background-color var(--tf-dur-fast) var(--tf-ease-fast);
    top:8px
}
.flatpickr-prev-month:hover,.flatpickr-next-month:hover{background:var(--tf-color-bg-soft);color:var(--tf-color-text);fill:var(--tf-color-text)}
.flatpickr-prev-month svg,.flatpickr-next-month svg{width:14px;height:14px}
.flatpickr-weekdays{margin-top:4px;background:transparent}
.flatpickr-weekday{color:var(--tf-color-placeholder);font-weight:500;font-size:13px;background:transparent}
.flatpickr-days{padding:4px 0;width:288px}
.dayContainer{padding:0;width:288px;min-width:288px;max-width:288px;gap:0;justify-content:flex-start}
.flatpickr-day{
    border-radius:50%;width:40px;height:40px;line-height:40px;margin:1px 0;
    color:var(--tf-color-text);font-weight:400;font-size:14px;border:none;
    transition:background-color var(--tf-dur-fast) var(--tf-ease-fast),
               color var(--tf-dur-fast) var(--tf-ease-fast)
}
.flatpickr-day:hover:not(.flatpickr-disabled):not(.selected){background:var(--tf-color-bg-soft);color:var(--tf-color-text)}
.flatpickr-day.today{font-weight:600;color:var(--tf-color-text);border:none;position:relative}
.flatpickr-day.today:after{content:'';position:absolute;bottom:6px;left:50%;transform:translateX(-50%);width:4px;height:4px;border-radius:50%;background:var(--tf-color-text)}
.flatpickr-day.today.selected:after{background:#fff}
.flatpickr-day.selected,.flatpickr-day.selected:hover{background:var(--tf-color-text);color:#fff;border:none;font-weight:500}
.flatpickr-day.flatpickr-disabled,.flatpickr-day.prevMonthDay,.flatpickr-day.nextMonthDay{color:var(--tf-color-border-hover);font-weight:400}
.flatpickr-day.flatpickr-disabled:hover{background:transparent}
.numInputWrapper:hover{background:var(--tf-color-bg-soft);border-radius:6px}
.numInputWrapper span.arrowUp,.numInputWrapper span.arrowDown{border:none;opacity:.5}
.numInputWrapper span.arrowUp:after{border-bottom-color:var(--tf-color-text)}
.numInputWrapper span.arrowDown:after{border-top-color:var(--tf-color-text)}

/* ═══════════════════════════════════════════════════════════════════
   chat-widget.css — Sohbet widget'ı (her sayfada include edilir)
   includes/chat-widget.php'den taşındı (2026-05-11)
   ═══════════════════════════════════════════════════════════════════ */
/* cw-* prefix — defter (.dc-*), header (.hy-*), ms-shell (.ms-*) ile çakışmaz */
.cw-root, .cw-root *{box-sizing:border-box}

/* ── BUBBLE / BUTTON (closed state) ─────────────────────────
   Desktop ≥641px: outline button (icon + "Mesajlar" + badge) — Hesabım button stili
   Mobile <641px: yuvarlak bubble (FAB pattern) */
.cw-bubble{
  /* Default (rail dışı sayfalar için fallback): fixed bottom-right */
  position:fixed;
  bottom:32px;
  right:32px;
  z-index:6400;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;

  height:auto;
  padding: 12px 18px;
  border-radius:var(--ms-radius-xs,6px);
  background:var(--ms-bg,#fff);
  color:var(--ms-fg,#0f1111);
  border:1px solid var(--ms-border,#EAECF0);
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:15px;
  font-weight:500;
  font-family:inherit;
  text-decoration:none;
  box-shadow:0 4px 12px rgba(0,0,0,.06);
  transition:background .15s,border-color .15s,box-shadow .18s,transform .12s;
}
.cw-bubble:hover{
  background:var(--ms-chip-surface,#F5F5FA);
  border-color:var(--ms-border-strong,#C3C5CA);
  box-shadow:0 6px 16px rgba(0,0,0,.08);
}
.cw-bubble:active{transform:translateY(1px)}
.cw-bubble svg.cw-bubble-icon{width:20px;height:20px;fill:currentColor;flex-shrink:0}
.cw-bubble .cw-label{font-size:15px;font-weight:500;line-height:1}
.cw-bubble.cw-is-hidden{display:none !important}
.cw-bubble.cw-is-pending{visibility:hidden !important}

/* Rail içine taşındığında: tam genişlik, sticky bottom, alt sabit */
.cw-bubble.cw-in-rail{
  position:sticky;
  bottom:16px;
  right:auto;
  left:auto;
  width:100%;
  margin-top:16px;
  justify-content:space-between;
  z-index:50;
}
.cw-bubble.cw-in-rail .cw-label{
  flex:1;
  text-align:left;
  padding-left:2px;
}

/* Drawer (sol persistent sidebar ≥901px) içine taşındığında: tam genişlik, alt sabit (flex column son child) */
.cw-bubble.cw-in-drawer{
  position:relative;
  bottom:auto;
  right:auto;
  left:auto;
  margin:8px 12px 12px;
  width:calc(100% - 24px);
  flex-shrink:0;
  justify-content:space-between;
  z-index:auto;
}
.cw-bubble.cw-in-drawer .cw-label{
  flex:1;
  text-align:left;
  padding-left:2px;
}

/* Mobile: bubble gizli (bottom-nav'da Mesajlar var), panel ise full-screen overlay */
@media (max-width:640px){
  .cw-bubble{display:none !important}
  .cw-panel{
    position:fixed !important;
    inset:0 !important;
    width:100% !important;
    min-width:0 !important;
    height:100dvh !important;
    max-height:100dvh !important;
    bottom:0 !important; right:0 !important; left:0 !important; top:0 !important;
    border-radius:0 !important;
    border:0 !important;
    box-shadow:none !important;
    overscroll-behavior:contain;
  }
  body.cw-mode-drawer .cw-panel{
    bottom:0 !important; left:0 !important;
  }
  /* Chat panel açıkken alttaki sayfa scroll'unu kilitle — yeni-pazaryeri vs. peek olmasın */
  body:has(.cw-panel.cw-is-open){overflow:hidden;}
  /* iOS Safari: input font-size <16px ise focus'ta auto-zoom — 16px ile engellenir */
  .cw-el-input{font-size:16px !important;}
  .cw-search input{font-size:16px !important;}
}

/* Badge — unread count (her zaman görünür, 0 olsa bile) */
.cw-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:22px;
  height:22px;
  padding:0 7px;
  background:#EF4444;
  color:#fff;
  border-radius:11px;
  font-size:11px;
  font-weight:700;
  letter-spacing:0;
  line-height:1;
  pointer-events:none;
  flex-shrink:0;
}
/* 0 ise nötr renk — ama yine görünür (kullanıcı isteği) */
.cw-badge.cw-is-zero{
  background:var(--ms-chip-surface,#F5F5FA);
  color:var(--ms-fg-muted,#6B7280);
}
.cw-badge.cw-is-pulse{animation:cw-pulse .8s cubic-bezier(.2,.8,.2,1) 2}

@keyframes cw-pulse{
  0%{transform:scale(1);box-shadow:0 0 0 2px #fff,0 0 0 0 rgba(239,68,68,.6)}
  50%{transform:scale(1.25);box-shadow:0 0 0 2px #fff,0 0 0 8px rgba(239,68,68,0)}
  100%{transform:scale(1);box-shadow:0 0 0 2px #fff,0 0 0 0 rgba(239,68,68,0)}
}

/* ── PANEL (open state) ────────────────────────────────────── */
.cw-panel{
  position:fixed;
  bottom:32px;
  right:32px;
  width:430px;
  min-width:420px;
  height:680px;
  max-height:calc(100vh - 64px);
  background:var(--ms-bg,#fff);
  border:1px solid var(--ms-border,#EAECF0);
  border-radius:16px;
  box-shadow:0 12px 40px rgba(0,0,0,.18),0 4px 12px rgba(0,0,0,.08);
  z-index:9500;
  display:none;
  flex-direction:column;
  overflow:hidden;
  transform-origin:bottom right;
  animation:cw-slide-up .25s cubic-bezier(.2,.8,.2,1);
}
.cw-panel.cw-is-open{display:flex}

/* Drawer mode: panel bubble'ın yanından (drawer right edge'inden) açılır */
body.cw-mode-drawer .cw-panel{
  bottom:12px;
  left:202px;
  right:auto;
  transform-origin:bottom left;
}

@keyframes cw-slide-up{
  from{opacity:0;transform:translateY(20px) scale(.96)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

/* Panel header */
.cw-head{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 16px;
  border-bottom:1px solid var(--ms-border,#EAECF0);
  background:var(--ms-bg,#fff);
  flex-shrink:0;
  min-height:56px;
}
.cw-head-back{
  width:32px;
  height:32px;
  border:0;
  background:transparent;
  border-radius:50%;
  cursor:pointer;
  display:none;
  align-items:center;
  justify-content:center;
  color:var(--ms-fg,#0f1111);
  transition:background .15s;
  flex-shrink:0;
  padding:0;
}
.cw-head-back:hover{background:var(--ms-chip-surface,#F5F5FA)}
.cw-head-back svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cw-panel.cw-is-chatting .cw-head-back{display:flex}

.cw-head-avatar-wrap{
  width:36px;
  height:36px;
  flex-shrink:0;
  display:none;
}
.cw-panel.cw-is-chatting .cw-head-avatar-wrap{display:inline-flex}
.cw-head-avatar-wrap .cw-avatar,
.cw-head-avatar-wrap .cw-avatar-letter{width:36px;height:36px;font-size:13px}

/* Avatar — defter card paritesi BIREBIR (DefterCard .dc-avatar / .dc-avatar-letter ile aynı) */
.cw-avatar{
  width:42px;height:42px;
  border-radius:var(--ms-radius-circle,50%);
  object-fit:cover;
  flex-shrink:0;
  background:var(--ms-chip-surface,#F5F5FA);
}
.cw-avatar-letter{
  width:42px;height:42px;
  border-radius:var(--ms-radius-circle,50%);
  flex-shrink:0;
  background:var(--ms-chip-surface,#F5F5FA);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-weight:600;
  font-size:14px;
  letter-spacing:.5px;
  user-select:none;
}

.cw-head-title{
  flex:1;
  min-width:0;
  font-size:16px;
  font-weight:700;
  color:var(--ms-fg,#0f1111);
  letter-spacing:-0.2px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.cw-head-close{
  width:32px;
  height:32px;
  border:0;
  background:transparent;
  border-radius:50%;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--ms-fg-muted,#6B7280);
  transition:background .15s;
  flex-shrink:0;
  padding:0;
}
.cw-head-close:hover{background:var(--ms-chip-surface,#F5F5FA)}
.cw-head-close svg{width:18px;height:18px;fill:currentColor}

/* Search box (LIST state) */
.cw-search{
  position:relative;
  padding:12px 14px;
  border-bottom:1px solid var(--ms-border,#EAECF0);
  flex-shrink:0;
}
.cw-panel.cw-is-chatting .cw-search{display:none}
.cw-search input{
  width:100%;
  padding:9px 12px 9px 36px;
  border:1px solid var(--ms-border,#EAECF0);
  border-radius:999px;
  background:var(--ms-chip-surface,#F5F5FA);
  font:inherit;
  font-size:14px;
  color:var(--ms-fg,#0f1111);
  outline:none;
  transition:background .15s,border-color .15s;
}
.cw-search input::placeholder{color:var(--ms-fg-muted,#6B7280)}
.cw-search input:focus{background:var(--ms-bg,#fff);border-color:var(--ms-fg,#0f1111)}
.cw-search svg{
  position:absolute;
  left:26px;
  top:50%;
  transform:translateY(-50%);
  width:14px;
  height:14px;
  color:var(--ms-fg-muted,#6B7280);
  pointer-events:none;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* Body — list view */
.cw-body{
  flex:1;
  overflow-y:auto;
  background:var(--ms-bg,#fff);
}
.cw-panel.cw-is-chatting .cw-body{display:none}

.cw-thread-list{}
.cw-el-thread{
  display:flex;
  gap:12px;
  align-items:center;
  padding:12px 16px;
  cursor:pointer;
  border-bottom:1px solid var(--ms-border,#EAECF0);
  transition:background .15s;
}
.cw-el-thread:hover{background:var(--ms-chip-surface,#F5F5FA)}
/* Thread list avatar — .cw-avatar / .cw-avatar-letter kullanır (defter card paritesi) */
.cw-el-thread-meta{flex:1;min-width:0}
.cw-el-thread-row{
  display:flex;
  justify-content:space-between;
  gap:8px;
  align-items:baseline;
  margin-bottom:2px;
}
.cw-el-thread-name{
  flex:1;             /* Uzun firma adları için flex shrink */
  min-width:0;        /* nowrap+ellipsis için zorunlu */
  font-weight:600;
  font-size:14px;
  color:var(--ms-fg,#0f1111);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.cw-el-thread-time{
  font-size:11px;
  color:var(--ms-fg-muted,#6B7280);
  flex:0 0 auto;
  font-weight:500;
  white-space:nowrap;
}
.cw-el-thread-preview{
  font-size:13px;
  color:var(--ms-fg-secondary,#475467);
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  line-height:1.4;
  display:flex;
  align-items:center;
  gap:4px;
}
/* WhatsApp-style tick (gönderildi/okundu) — thread list preview önünde */
.cw-thread-tick{
  width:14px;height:14px;
  flex:0 0 14px;
  fill:var(--ms-fg-muted,#9CA3AF);
  display:inline-block;
  vertical-align:middle;
}
.cw-thread-tick.is-read{fill:#3B82F6;}
/* Yeni mesaj geldiğinde panel/bubble flicker (accentRed) */
@keyframes cw-flicker-anim{
  0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,0);}
  20%{box-shadow:0 0 0 4px rgba(239,68,68,.45);}
  40%{box-shadow:0 0 0 0 rgba(239,68,68,0);}
  60%{box-shadow:0 0 0 4px rgba(239,68,68,.35);}
  80%{box-shadow:0 0 0 0 rgba(239,68,68,0);}
}
.cw-flicker{animation:cw-flicker-anim 1.2s ease-in-out;}
.cw-el-thread-unread{
  background:var(--ms-pulse,#16A34A);
  color:#fff;
  border-radius:10px;
  padding:1px 7px;
  font-size:11px;
  font-weight:700;
  flex-shrink:0;
  line-height:1.4;
}

.cw-loading,.cw-error{
  padding:32px 20px;
  text-align:center;
  color:var(--ms-fg-muted,#6B7280);
  font-size:13px;
}
.cw-error{color:#EF4444}
/* Empty state — Flutter messages_screen paritesi (forum icon + başlık + alt metin) */
.cw-empty{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:40px 32px;
  text-align:center;
  min-height:280px;
}
.cw-empty-icon{
  width:56px;height:56px;
  color:var(--ms-fg-secondary,#475467);
  opacity:.3;
  margin-bottom:16px;
}
.cw-empty-icon svg{width:100%;height:100%;fill:currentColor;display:block;}
.cw-empty-title{
  font-size:16px;
  font-weight:500;
  color:var(--ms-fg-secondary,#475467);
  margin:0 0 8px;
  line-height:1.3;
}
.cw-empty-sub{
  font-size:13px;
  color:var(--ms-fg-muted,#6B7280);
  margin:0;
  line-height:1.5;
  max-width:280px;
}

/* Chat view — messages */
.cw-chat-body{
  display:none;
  flex:1;
  overflow-y:auto;
  padding:0;
  flex-direction:column;
  background:var(--ms-bg,#fff);
}
.cw-panel.cw-is-chatting .cw-chat-body{display:flex}
.cw-messages{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:0 14px 16px;
}

/* Firma profile intro — Flutter chat_screen.dart _buildChatProfileHeader paritesi */
.cw-firma-intro{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:48px 24px 24px;
}
.cw-firma-intro-loading{
  font-size:13px;
  color:var(--ms-fg-muted,#6B7280);
  padding:24px 0;
}
.cw-firma-intro-logo{
  width:80px;height:80px;
  border-radius:50%;
  object-fit:cover;
  background:var(--ms-chip-surface,#F5F5FA);
  margin-bottom:12px;
  flex-shrink:0;
}
.cw-firma-intro-logo-letter{
  width:80px;height:80px;
  border-radius:50%;
  background:var(--ms-chip-surface,#F5F5FA);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-weight:600;
  font-size:28px;
  letter-spacing:.5px;
  margin-bottom:12px;
  flex-shrink:0;
}
.cw-firma-intro-name{
  font-size:20px;
  font-weight:600;
  color:var(--ms-fg,#0f1111);
  margin:0 0 2px;
  line-height:1.3;
}
.cw-firma-intro-sub{
  font-size:14px;
  font-weight:400;
  color:var(--ms-fg-secondary,#475467);
  margin:0;
}
/* Onaylı Üye / Member badge — Flutter Row pattern (img + 6px gap + text) */
.cw-firma-intro-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:14px;
  font-weight:500;
  color:var(--ms-fg,#0f1111);
  letter-spacing:-.1px;
  margin:8px 0 0;
}
.cw-firma-intro-badge img{
  width:20px;height:20px;
  object-fit:contain;
  flex-shrink:0;
}
/* Stats grid — Flutter _buildProfileMetrics IntrinsicHeight Row */
.cw-firma-intro-stats{
  display:flex;
  align-items:stretch;
  width:100%;
  max-width:360px;
  margin:20px auto 0;
}
.cw-firma-intro-stat{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:0 8px;
}
.cw-firma-intro-divider{
  width:1px;
  background:var(--ms-border,#EAECF0);
  margin:6px 0;
  flex-shrink:0;
}
.cw-firma-intro-stat-val{
  font-size:22px;
  font-weight:700;
  color:var(--ms-fg,#0f1111);
  line-height:1.2;
  letter-spacing:-.4px;
}
.cw-firma-intro-stat-lbl{
  font-size:13px;
  font-weight:400;
  color:var(--ms-fg-secondary,#475467);
  margin-top:4px;
}
/* CTA — OutlinedButton paritesi: gray foreground, border, fully rounded, h:36 */
.cw-firma-intro-cta{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 16px;
  min-height:36px;
  border:1px solid var(--ms-border,#EAECF0);
  border-radius:100px;
  background:transparent;
  color:var(--ms-fg-secondary,#475467);
  font-size:13px;
  font-weight:400;
  text-decoration:none;
  margin-top:16px;
  transition:background .15s,border-color .15s;
}
.cw-firma-intro-cta:hover{
  background:var(--ms-chip-surface,#F5F5FA);
  text-decoration:none;
  color:var(--ms-fg-secondary,#475467);
}
.cw-firma-intro-cta svg{width:16px;height:16px;fill:currentColor;flex-shrink:0;}

.cw-el-msg{
  display:flex;
  flex-direction:column;
  max-width:78%;
}
.cw-el-msg-me{align-self:flex-end;text-align:right}
.cw-el-msg-other{align-self:flex-start;text-align:left}

.cw-el-bubble{
  padding:8px 12px;
  border-radius:16px;
  word-break:break-word;
  display:inline-flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:flex-end;
  gap:0 8px;
  font-size:14px;
  line-height:1.45;
}
.cw-el-msg-me .cw-el-bubble{
  background:var(--ms-fg,#0f1111);
  color:#fff;
  border-bottom-right-radius:4px;
}
.cw-el-msg-other .cw-el-bubble{
  background:var(--ms-chip-surface,#F5F5FA);
  color:var(--ms-fg,#0f1111);
  border:1px solid var(--ms-border,#EAECF0);
  border-bottom-left-radius:4px;
}
.cw-el-bubble-text{flex:1 1 auto;text-align:left}
.cw-el-bubble-meta{
  font-size:10px;
  white-space:nowrap;
  flex-shrink:0;
  margin-top:1px;
  line-height:1;
}
.cw-el-msg-me .cw-el-bubble-meta{color:rgba(255,255,255,.6)}
.cw-el-msg-other .cw-el-bubble-meta{color:var(--ms-fg-muted,#6B7280)}

.cw-tick{
  display:inline-block;
  width:14px;
  height:14px;
  vertical-align:middle;
  margin-left:3px;
  fill:rgba(255,255,255,.7);
}
/* Karşı taraf chat'i açıp okuduysa: tüm benden gönderilen mesajların tikleri mavi (WhatsApp pattern) */
.cw-chat-body.is-other-read .cw-el-msg-me .cw-tick{
  fill:#7BD4F6;
}

/* ── Quoted block (Defter / Pazaryeri) — Flutter _buildQuotedBubble paritesi ── */
.cw-quoted-block{
  display:flex;align-items:stretch;
  margin-bottom:6px;
  border-radius:8px;
  overflow:hidden;
  background:rgba(0,0,0,.05);
  width:100%;
  box-sizing:border-box;
}
.cw-el-msg-me .cw-quoted-block{background:rgba(255,255,255,.12);}
.cw-quoted-bar{
  width:4px;flex-shrink:0;
  background:#2563EB;             /* Defter: premiumBlue */
}
.cw-quoted-block.is-pazaryeri .cw-quoted-bar{background:#FFCA00;} /* Pazaryeri: yellow */
.cw-quoted-content{
  padding:8px 12px 8px 10px;
  min-width:0;flex:1;
  text-align:left;
}
.cw-quoted-label{
  display:flex;align-items:center;gap:5px;
  font-size:12px;font-weight:600;
  color:#2563EB;
  letter-spacing:-.1px;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cw-quoted-block.is-pazaryeri .cw-quoted-label{color:#B7791F;}
.cw-el-msg-me .cw-quoted-label{color:#7BD4F6;}
.cw-el-msg-me .cw-quoted-block.is-pazaryeri .cw-quoted-label{color:#FFE082;}
.cw-quoted-label svg{width:14px;height:14px;fill:currentColor;flex-shrink:0;}
.cw-quoted-text{
  font-size:13px;
  color:var(--ms-fg-secondary,#475467);
  line-height:1.35;margin-top:4px;
  display:-webkit-box;
  -webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden;
  word-break:break-word;
  white-space:pre-wrap;
}
.cw-el-msg-me .cw-quoted-text{color:rgba(255,255,255,.85);}
.cw-quoted-body{
  font-size:14px;
  line-height:1.4;
  white-space:pre-wrap;
  word-break:break-word;
}

/* Composer (CHAT state) */
.cw-foot{
  display:none;
  padding:10px 14px;
  border-top:1px solid var(--ms-border,#EAECF0);
  background:var(--ms-bg,#fff);
  flex-shrink:0;
}
.cw-panel.cw-is-chatting .cw-foot{display:block}

.cw-el-composer{
  display:flex;
  gap:8px;
  align-items:flex-end;
  background:var(--ms-chip-surface,#F5F5FA);
  border:1px solid var(--ms-border,#EAECF0);
  border-radius:999px;
  padding:5px 5px 5px 14px;
  transition:background .15s,border-color .15s;
}
.cw-el-composer:focus-within{
  background:var(--ms-bg,#fff);
  border-color:var(--ms-fg,#0f1111);
}
.cw-el-input{
  flex:1;
  resize:none;
  border:0;
  background:transparent;
  font:inherit;
  color:var(--ms-fg,#0f1111);
  font-size:14px;
  line-height:1.5;
  max-height:100px;
  min-height:32px;
  outline:none;
  padding:6px 0;
}
.cw-el-input::placeholder{color:var(--ms-fg-muted,#6B7280)}
.cw-el-send{
  width:36px;
  height:36px;
  border-radius:50%;
  border:0;
  cursor:pointer;
  background:var(--ms-yellow,#FFCA00);
  color:var(--ms-fg,#0f1111);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  padding:0;
  /* WhatsApp pattern: input boşken gizli, yazı yazılınca premium transition ile görünür */
  opacity:0;
  transform:scale(.6) rotate(-12deg);
  width:0;
  margin:0;
  pointer-events:none;
  transition:opacity .22s cubic-bezier(.2,.8,.2,1), transform .22s cubic-bezier(.2,.8,.2,1), width .22s cubic-bezier(.2,.8,.2,1), margin .22s cubic-bezier(.2,.8,.2,1), filter .15s;
}
.cw-el-composer.has-text .cw-el-send{
  opacity:1;
  transform:scale(1) rotate(0);
  width:36px;
  pointer-events:auto;
}
.cw-el-send:hover{filter:brightness(.96)}
.cw-el-send:active{transform:scale(.94) rotate(0)}
.cw-el-send svg{width:18px;height:18px;fill:currentColor}

/* Scroll-to-bottom — chat detail görünümünde bottom'da değilken sağ altta beliren ok */
.cw-scroll-bottom{
  position:absolute;
  right:14px;
  bottom:84px;
  width:40px;
  height:40px;
  border-radius:50%;
  border:0;
  background:var(--ms-bg,#fff);
  color:var(--ms-fg,#0f1111);
  box-shadow:0 4px 14px rgba(0,0,0,.18),0 1px 4px rgba(0,0,0,.08);
  cursor:pointer;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:5;
  transition:opacity .2s ease,transform .2s ease;
  opacity:0;
  transform:translateY(8px);
}
.cw-scroll-bottom.is-visible{display:flex;opacity:1;transform:translateY(0)}
.cw-scroll-bottom:hover{filter:brightness(.96)}
.cw-scroll-bottom svg{width:22px;height:22px;fill:currentColor}

/* Skeleton loader */
.cw-skel{padding:14px}
.cw-skel-row{display:flex;gap:12px;align-items:center;padding:8px 0}
.cw-skel-a{
  width:42px;
  height:42px;
  border-radius:50%;
  background:linear-gradient(90deg,#EAECF0 25%,#F5F5FA 37%,#EAECF0 63%);
  background-size:400% 100%;
  animation:cw-shimmer 1.4s ease infinite;
  flex-shrink:0;
}
.cw-skel-b{flex:1}
.cw-skel-l1,.cw-skel-l2{
  height:10px;
  border-radius:6px;
  background:linear-gradient(90deg,#EAECF0 25%,#F5F5FA 37%,#EAECF0 63%);
  background-size:400% 100%;
  animation:cw-shimmer 1.4s ease infinite;
}
.cw-skel-l1{width:62%;margin-bottom:6px}
.cw-skel-l2{width:42%}
@keyframes cw-shimmer{0%{background-position:100% 0}100%{background-position:0 0}}

/* ═══════════════════════════════════════════════════════════════════
   hideDrawer flag — body.hy-hide-drawer class ile desktop drawer/sidebar gizler
   header_yeni.php'den taşındı (refactor 2026-05-11)
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width: 901px) {
    body.hy-hide-drawer { padding-left: 0 !important; }
    body.hy-hide-drawer .hy-drawer,
    body.hy-hide-drawer .hy-backdrop { display: none !important; }
}