/* =========================================================================
   Tanıtımcım — Üyelik tipleri, kurumsal kayıt sihirbazı, canlı sohbet,
   bildirim merkezi ve profil tamamlanma bileşenleri.

   TASARIM İLKESİ
   --------------
   Bu dosya sitenin mevcut tasarım dilini genişletir, onunla yarışmaz:
     · Tipografi : Poppins, 12px taban (--thm-font-size), başlıklar 16px/500
     · Köşe      : 8px (sitenin her yerinde kullanılan tek yarıçap)
     · Renk      : lacivert #154f9e (birincil) + turuncu #f08017 (vurgu)
     · Form      : dolu gri (#eee) zemin, çerçevesiz — sitenin input dili
     · Yüzey     : gölge yerine ince #a5a5a542 çizgi

   style.css'e dokunulmaz; bu dosya onun üzerine eklenir. Sitenin global
   `input`/`select`/`textarea` kuralları burada bilinçli olarak korunur,
   yalnızca köşe yarıçapı ve odak halkası netleştirilir.
   ========================================================================= */

:root {
    /* Site paletine bağlı; style.css'teki değerlerle birebir aynı. */
    --tc-primary: #154f9e;
    --tc-primary-dark: #103e7c;
    --tc-primary-soft: #eaf1fb;
    --tc-accent: #f08017;
    --tc-accent-soft: #fdf1e5;
    --tc-success: #1e7a4f;
    --tc-danger: #cc3b3b;
    --tc-ink: #000;
    --tc-muted: #666;
    --tc-line: #a5a5a542;
    --tc-line-solid: #e6e6e6;
    --tc-fill: #eee;
    --tc-surface: #fff;
    --tc-bg: #fbfdff;
    --tc-radius: 8px;
    --tc-fs: 12px;
    --tc-fs-sm: 11px;
    --tc-fs-title: 16px;
}

/* -------------------------------------------------------------------------
   0. Yatay taşma koruması
   -------------------------------------------------------------------------
   style.css'te hiçbir yerde `img { max-width: 100% }` tanımlı değil; bu yüzden
   kendi doğal genişliğinden büyük her görsel sayfayı yatayda kaydırıyordu.
   En belirgin örnek header'daki reklam görseli (306px), 992–1200px arasında
   sütununu 62px taşırıyordu.

   Aşağıdaki kural yalnızca üst sınır koyar; sınıflarla verilmiş genişlik ve
   yükseklikler (ör. .brand-logo, .header-advert) daha yüksek özgüllükte
   olduğu için değişmez.
   ------------------------------------------------------------------------- */

img {
    max-width: 100%;
}

/* Header reklam alanı: sütununa sığsın, oranını korusun */
.header-top-promo {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

/* Üst çubuk bağlantıları
   ---------------------------------------------------------------------
   style.css'te ikon ile metin arası 2px; bu mesafede ikisi birleşik
   görünüyor. Ayrıca bağlantılar iki satıra bölünüp ("Teklif / İste")
   çubuğu yükseltiyordu. Metin bölünmez, aralık okunur hale getirilir. */
.header-top-left a,
.header-top-right a,
.header-top-left a h1,
.header-top-left button,
.header-top-right button {
    gap: 5px;
    white-space: nowrap;
}

.header-top-left iconify-icon,
.header-top-right iconify-icon {
    margin-right: 0;
    flex: none;
}

/* Yer kalmadığında bağlantı grubu bir alt satıra iner. Etiketler bölünmediği
   için ("Teklif / İste" gibi) bu, kırık değil düzenli görünür. */
.top-header {
    flex-wrap: wrap;
    row-gap: 6px;
}

/* Son öğedeki sağ boşluk satır sonunda gereksiz yer kaplamasın */
.header-top-right a:last-child {
    margin-right: 0;
}

/* Form bölüm başlıkları
   ---------------------------------------------------------------------
   Başlıkların üst boşluğu 12px; bir önceki bölümün alanlarına yapışık
   duruyor ve bölümler tek blok gibi görünüyordu. İlk başlık hariç
   bölümler arası nefes payı açılır. */
.profile-form .thm-title {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--tc-line);
}

/* Formun ilk başlığında ayraç gereksiz */
.profile-form .row > *:first-child .thm-title {
    margin-top: 12px;
    padding-top: 0;
    border-top: none;
}

/* Uzun kelime/URL'ler kutularını taşırmasın */
.tc-msg__bubble,
.tc-inbox__body,
.tc-inbox__preview,
.tc-conv__last {
    overflow-wrap: anywhere;
}

/* -------------------------------------------------------------------------
   Ortak yüzey ve form öğeleri
   ------------------------------------------------------------------------- */

.tc-card {
    background: var(--tc-surface);
    border: 1px solid var(--tc-line);
    border-radius: var(--tc-radius);
}

/* Sitenin input dili: dolu gri zemin, çerçevesiz, 8px köşe.
   Global `input` kuralı sol köşeleri yuvarladığı için (#arama çubuğu)
   burada !important ile tam yarıçap geri alınır — profile-form ile aynı yöntem. */
.tc-field input[type="text"],
.tc-field input[type="email"],
.tc-field input[type="password"],
.tc-field input[type="tel"],
.tc-field input[type="url"],
.tc-field input[type="number"],
.tc-field input[type="search"],
.tc-field select,
.tc-field textarea {
    width: 100%;
    border: none;
    border-radius: var(--tc-radius) !important;
    background-color: var(--tc-fill);
    padding: 8px 12px;
    font-size: var(--tc-fs);
    color: var(--tc-ink);
    transition: box-shadow .15s ease, background-color .15s ease;
}

.tc-field input:focus,
.tc-field select:focus,
.tc-field textarea:focus {
    outline: none;
    background-color: #e9eff8;
    box-shadow: inset 0 0 0 1px var(--tc-primary);
}

.tc-field {
    margin-bottom: 14px;
}

.tc-field > label {
    display: block;
    font-size: var(--tc-fs);
    color: var(--tc-ink);
    margin-bottom: 5px;
}

/* Sitedeki "* Zorunlu" dili ile aynı görünüm */
.tc-req {
    color: var(--tc-accent);
    font-size: var(--tc-fs-sm);
}

.tc-opt {
    color: var(--tc-muted);
    font-size: var(--tc-fs-sm);
}

.tc-field.has-error input,
.tc-field.has-error select,
.tc-field.has-error textarea {
    box-shadow: inset 0 0 0 1px var(--tc-danger);
    background-color: #fdf2f2;
}

.tc-field__error {
    display: none;
    font-size: var(--tc-fs-sm);
    color: var(--tc-danger);
    margin-top: 4px;
}

.tc-field.has-error .tc-field__error {
    display: block;
}

.tc-field__help {
    font-size: var(--tc-fs-sm);
    color: var(--tc-muted);
    margin-top: 4px;
}

/* Butonlar — .thm-btn ile aynı ölçü, ama satır içi kullanım için otomatik en */
.tc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid transparent;
    border-radius: var(--tc-radius);
    font-size: var(--tc-fs);
    line-height: 1.5;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.tc-btn--primary {
    background: var(--tc-primary);
    color: #fff !important;
}

.tc-btn--primary:hover {
    background: var(--tc-primary-dark);
}

.tc-btn--accent {
    background: var(--tc-accent);
    color: #fff !important;
}

.tc-btn--accent:hover {
    background: #d86f0d;
}

.tc-btn--ghost {
    background: #fff;
    border-color: var(--tc-line-solid);
    color: var(--tc-muted) !important;
}

.tc-btn--ghost:hover {
    border-color: var(--tc-primary);
    color: var(--tc-primary) !important;
}

.tc-btn[disabled] {
    opacity: .5;
    cursor: not-allowed;
}

/* Etiketler */
.tc-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--tc-radius);
    font-size: var(--tc-fs-sm);
    line-height: 1.6;
    white-space: nowrap;
}

.tc-tag--guest  { background: #f0f0f0; color: var(--tc-muted); }
.tc-tag--member { background: var(--tc-primary-soft); color: var(--tc-primary); }
.tc-tag--new    { background: var(--tc-accent); color: #fff; }

.tc-badge-type {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: var(--tc-radius);
    font-size: var(--tc-fs-sm);
    line-height: 1.6;
    white-space: nowrap;
}

.tc-badge-type--corporate  { background: var(--tc-primary-soft); color: var(--tc-primary); }
.tc-badge-type--individual { background: var(--tc-accent-soft); color: #a35a06; }

/* =========================================================================
   1. Üyelik tipi seçimi
   ========================================================================= */

.tc-type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.tc-type-card {
    position: relative;
    display: block;
    padding: 16px;
    padding-right: 44px;
    border: 1px solid var(--tc-line);
    border-radius: var(--tc-radius);
    background: var(--tc-surface);
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.tc-type-card:hover {
    border-color: #c3d3ea;
}

.tc-type-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.tc-type-card.is-selected {
    border-color: var(--tc-primary);
    background: #fcfdff;
}

.tc-type-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--tc-radius);
    background: var(--tc-primary-soft);
    color: var(--tc-primary);
    margin-bottom: 10px;
}

.tc-type-card__title {
    font-size: var(--tc-fs-title);
    font-weight: 500;
    color: var(--tc-ink);
    margin: 0 0 4px;
}

.tc-type-card__desc {
    font-size: var(--tc-fs);
    line-height: 1.55;
    color: var(--tc-muted);
    margin: 0 0 10px;
}

.tc-type-card__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tc-type-card__list li {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: var(--tc-fs);
    color: var(--tc-ink);
    padding: 2px 0;
}

.tc-type-card__list li iconify-icon {
    flex: 0 0 auto;
    margin-top: 2px;
    color: var(--tc-success);
}

.tc-type-card__list li.is-off {
    color: var(--tc-muted);
}

.tc-type-card__list li.is-off iconify-icon {
    color: #c4c4c4;
}

.tc-type-card__check {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid var(--tc-line-solid);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: background-color .15s ease, border-color .15s ease;
}

.tc-type-card.is-selected .tc-type-card__check {
    background: var(--tc-primary);
    border-color: var(--tc-primary);
}

.tc-type-card__check iconify-icon {
    opacity: 0;
    transition: opacity .15s ease;
}

.tc-type-card.is-selected .tc-type-card__check iconify-icon {
    opacity: 1;
}

/* =========================================================================
   2. Kurumsal kayıt sihirbazı
   ========================================================================= */

.tc-wizard {
    background: var(--tc-surface);
    border: 1px solid var(--tc-line);
    border-radius: var(--tc-radius);
    overflow: hidden;
}

.tc-wizard__head {
    padding: 14px 18px 0;
}

.tc-steps {
    display: flex;
    gap: 0;
    list-style: none;
    padding: 0;
    margin: 0;
    overflow-x: auto;
}

.tc-steps__item {
    flex: 1 1 0;
    min-width: 84px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--tc-line-solid);
    text-align: center;
    color: var(--tc-muted);
    font-size: var(--tc-fs);
    transition: color .15s ease, border-color .15s ease;
}

.tc-steps__item.is-active {
    color: var(--tc-primary);
    border-bottom-color: var(--tc-primary);
}

.tc-steps__item.is-done {
    color: var(--tc-accent);
    border-bottom-color: var(--tc-accent);
    cursor: pointer;
}

.tc-steps__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--tc-fill);
    color: var(--tc-muted);
    font-size: var(--tc-fs-sm);
    margin-bottom: 5px;
}

.tc-steps__item.is-active .tc-steps__num {
    background: var(--tc-primary);
    color: #fff;
}

.tc-steps__item.is-done .tc-steps__num {
    background: var(--tc-accent);
    color: #fff;
}

.tc-steps__label {
    display: block;
}

/* Ayrı bir ilerleme şeridi YOK.
   Adım sekmelerinin kendi alt çizgisi ilerlemeyi zaten anlatıyor; ikinci bir
   şerit eklendiğinde iki farklı renkte çizgi üst üste binip hata gibi
   görünüyordu. Tek gösterge bırakıldı. */

.tc-wizard__body {
    padding: 18px;
}

.tc-step-pane {
    display: none;
}

.tc-step-pane.is-active {
    display: block;
}

.tc-step-pane__title {
    font-size: var(--tc-fs-title);
    font-weight: 500;
    color: var(--tc-ink);
    margin: 0 0 3px;
}

.tc-step-pane__hint {
    font-size: var(--tc-fs);
    color: var(--tc-muted);
    margin: 0 0 16px;
}

.tc-wizard__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 18px;
    border-top: 1px solid var(--tc-line);
}

.tc-wizard__counter {
    font-size: var(--tc-fs);
    color: var(--tc-muted);
}

/* Şifre gücü — ince, dört bölmeli şerit */
.tc-pwmeter {
    display: flex;
    gap: 3px;
    margin-top: 6px;
}

.tc-pwmeter span {
    flex: 1;
    height: 3px;
    border-radius: 2px;
    background: var(--tc-line-solid);
    transition: background-color .2s ease;
}

.tc-pwmeter[data-score="1"] span:nth-child(1)     { background: var(--tc-danger); }
.tc-pwmeter[data-score="2"] span:nth-child(-n+2)  { background: var(--tc-accent); }
.tc-pwmeter[data-score="3"] span:nth-child(-n+3)  { background: #c9a227; }
.tc-pwmeter[data-score="4"] span                  { background: var(--tc-success); }

.tc-pwmeter__label {
    font-size: var(--tc-fs-sm);
    color: var(--tc-muted);
    margin-top: 4px;
}

/* Logo yükleme — alanın tamamı tıklanabilir bir <label> */
.tc-upload {
    /* Gizlenen dosya girişinin konum referansı; yoksa mutlak konumlu input
       sayfanın sağına düşüp yatay taşma yaratıyor. */
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border: 1px dashed var(--tc-line-solid);
    border-radius: var(--tc-radius);
    background: #fbfbfb;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.tc-upload:hover {
    border-color: var(--tc-primary);
    background: #f7f9fd;
}

.tc-upload.is-dragover {
    border-color: var(--tc-primary);
    background: var(--tc-primary-soft);
}

/* Klavye ile odaklanınca da görünür olsun */
.tc-upload:focus-within {
    border-color: var(--tc-primary);
    box-shadow: 0 0 0 2px var(--tc-primary-soft);
}

.tc-upload__preview {
    flex: 0 0 auto;
    width: 72px;
    height: 72px;
    border-radius: var(--tc-radius);
    border: 1px solid var(--tc-line);
    background: #fff center/contain no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c4c4c4;
}

.tc-upload__body {
    flex: 1 1 auto;
    min-width: 0;
    display: block;
}

.tc-upload__title {
    display: block;
    margin-bottom: 3px;
    font-size: var(--tc-fs);
    color: var(--tc-ink);
}

.tc-upload__hint {
    display: block;
    color: var(--tc-muted);
    font-size: var(--tc-fs-sm);
}

.tc-upload__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.tc-upload__btn {
    pointer-events: none; /* tıklama sarmalayıcı label'a gitsin */
}

.tc-upload__filename {
    font-size: var(--tc-fs-sm);
    color: var(--tc-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 220px;
}

.tc-upload__filename.is-selected {
    color: var(--tc-primary);
}

/* Yerel dosya girişi gizlenir; erişilebilirlik için DOM'da ve odaklanabilir
   kalır. left/top verilmezse mutlak konum "statik konumundan" hesaplanır ve
   öğe sayfayı taşırır — bu yüzden açıkça sıfırlanır. */
.tc-upload__input {
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* Tekrarlanabilir telefon satırları */
.tc-repeat__row {
    display: flex;
    gap: 6px;
    margin-bottom: 6px;
}

.tc-repeat__row input {
    flex: 1 1 auto;
}

.tc-btn-icon {
    flex: 0 0 auto;
    width: 36px;
    border: 1px solid var(--tc-line-solid);
    border-radius: var(--tc-radius);
    background: #fff;
    color: var(--tc-muted);
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease;
}

.tc-btn-icon:hover {
    color: var(--tc-danger);
    border-color: #eec5c5;
}

/* -------------------------------------------------------------------------
   Ülke kodlu telefon alanı
   ------------------------------------------------------------------------- */

.tc-phone {
    display: flex;
    gap: 6px;
    align-items: stretch;
    /* Dar sütunlarda (ör. profil sayfası) esneyebilsin */
    flex: 1 1 auto;
    min-width: 0;
}

/* `.profile-form select` gibi mevcut kurallar genişliği ezdiği için
   burada bilinçli olarak !important kullanılır. */
.tc-phone__code {
    flex: 0 0 auto;
    width: 126px !important;
    border: none;
    border-radius: var(--tc-radius) !important;
    background-color: var(--tc-fill);
    padding: 8px 4px 8px 10px !important;
    font-size: var(--tc-fs-sm) !important;
    color: var(--tc-ink);
    cursor: pointer;
}

.tc-phone__code:focus {
    outline: none;
    box-shadow: inset 0 0 0 1px var(--tc-primary);
}

.tc-phone__custom {
    flex: 0 0 auto;
    width: 68px;
    border: none;
    border-radius: var(--tc-radius) !important;
    background-color: var(--tc-fill);
    padding: 8px 10px;
    font-size: var(--tc-fs);
    text-align: center;
}

.tc-phone__custom:focus {
    outline: none;
    box-shadow: inset 0 0 0 1px var(--tc-primary);
}

.tc-phone__number {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    border-radius: var(--tc-radius) !important;
    background-color: var(--tc-fill);
    padding: 8px 12px;
    font-size: var(--tc-fs);
    letter-spacing: .4px;
}

.tc-phone__number:focus {
    outline: none;
    background-color: #e9eff8;
    box-shadow: inset 0 0 0 1px var(--tc-primary);
}

.tc-field.has-error .tc-phone__number {
    box-shadow: inset 0 0 0 1px var(--tc-danger);
    background-color: #fdf2f2;
}

/* "Diğer ülke" seçiliyken seçim kutusu daralır, kod alanı yer açar */
.tc-phone.is-custom-code .tc-phone__code {
    width: 104px !important;
}

/* Mobil şablon (Tailwind) için: beyaz zemin, çerçeveli, daha yuvarlak */
.tc-phone--soft .tc-phone__code,
.tc-phone--soft .tc-phone__custom,
.tc-phone--soft .tc-phone__number {
    background-color: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px !important;
    padding-top: 11px;
    padding-bottom: 11px;
    font-size: 13px !important;
}

.tc-phone--soft .tc-phone__code:focus,
.tc-phone--soft .tc-phone__custom:focus,
.tc-phone--soft .tc-phone__number:focus {
    border-color: var(--tc-primary);
    box-shadow: none;
}

/* Profil sayfasındaki telefon satırı: alan esner, kaldır butonu sabit kalır.
   (.thm-btn-secondary width:100% olduğu için burada sınırlandırılır.) */
.phone-item .d-flex > .tc-phone {
    flex: 1 1 auto;
    min-width: 0;
}

.phone-item .btn-remove-phone {
    flex: 0 0 auto;
    width: 30px !important;
    height: 34px;
    padding: 0 !important;
    line-height: 1;
}

@media (max-width: 480px) {
    .tc-phone { flex-wrap: wrap; }
    .tc-phone__code { flex: 1 1 100%; width: 100% !important; }
    .tc-phone__number { flex: 1 1 100%; }
}

/* -------------------------------------------------------------------------
   6 haneli doğrulama kodu
   ------------------------------------------------------------------------- */

.tc-otp {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.tc-otp__box {
    flex: 1 1 0;
    min-width: 0;
    height: 52px;
    border: none;
    border-radius: var(--tc-radius) !important;
    background-color: var(--tc-fill);
    text-align: center;
    font-size: 22px !important;
    color: var(--tc-ink);
    padding: 0 !important;
    transition: box-shadow .15s ease, background-color .15s ease;
}

.tc-otp__box:focus {
    outline: none;
    background-color: #e9eff8;
    box-shadow: inset 0 0 0 2px var(--tc-primary);
}

.tc-otp__box:disabled {
    opacity: .7;
}

.tc-otp__status {
    font-size: var(--tc-fs);
    color: var(--tc-muted);
    margin: 0 0 6px;
    min-height: 18px;
}

.tc-otp__status.is-error {
    color: var(--tc-danger);
}

.tc-otp__status.is-busy {
    color: var(--tc-primary);
}

@media (max-width: 480px) {
    .tc-otp { gap: 5px; }
    .tc-otp__box { height: 46px; font-size: 19px !important; }
}

/* =========================================================================
   3. Profil tamamlanma göstergesi
   ========================================================================= */

.tc-completion {
    background: var(--tc-surface);
    border: 1px solid var(--tc-line);
    border-radius: var(--tc-radius);
    padding: 14px 16px;
    margin-bottom: 16px;
}

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

.tc-completion__title {
    font-size: var(--tc-fs-title);
    font-weight: 500;
    color: var(--tc-ink);
    margin: 0 0 4px;
}

.tc-completion__pct {
    font-size: var(--tc-fs-title);
    font-weight: 600;
    color: var(--tc-primary);
    line-height: 1;
}

.tc-completion__bar {
    height: 4px;
    border-radius: 2px;
    background: var(--tc-line-solid);
    overflow: hidden;
    margin-bottom: 10px;
}

.tc-completion__bar span {
    display: block;
    height: 100%;
    border-radius: 2px;
    background: var(--tc-primary);
    transition: width .3s ease;
}

.tc-completion--low  .tc-completion__pct      { color: var(--tc-danger); }
.tc-completion--low  .tc-completion__bar span { background: var(--tc-danger); }
.tc-completion--mid  .tc-completion__pct      { color: var(--tc-accent); }
.tc-completion--mid  .tc-completion__bar span { background: var(--tc-accent); }
.tc-completion--done .tc-completion__pct      { color: var(--tc-success); }
.tc-completion--done .tc-completion__bar span { background: var(--tc-success); }

.tc-completion__missing {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.tc-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: var(--tc-radius);
    background: var(--tc-fill);
    color: var(--tc-muted);
    font-size: var(--tc-fs-sm);
    cursor: default;
}

.tc-chip iconify-icon {
    color: var(--tc-accent);
}

.tc-chip--ok {
    background: var(--tc-primary-soft);
    color: var(--tc-primary);
}

.tc-chip--ok iconify-icon {
    color: var(--tc-success);
}

.tc-completion__note {
    font-size: var(--tc-fs);
    color: var(--tc-muted);
    margin: 9px 0 0;
    line-height: 1.6;
}

.tc-completion__note strong {
    color: var(--tc-ink);
}

/* Bireysel üyeye kurumsal daveti — düz, turuncu kenarlı sade kart */
.tc-upsell {
    padding: 14px 16px;
    border: 1px solid var(--tc-line);
    border-left: 3px solid var(--tc-accent);
    border-radius: var(--tc-radius);
    background: var(--tc-surface);
    margin-bottom: 16px;
}

.tc-upsell h4 {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--tc-fs-title);
    font-weight: 500;
    color: var(--tc-ink);
    margin: 0 0 5px;
}

.tc-upsell h4 iconify-icon {
    color: var(--tc-accent);
}

.tc-upsell p {
    font-size: var(--tc-fs);
    color: var(--tc-muted);
    margin: 0 0 10px;
    line-height: 1.6;
}

/* =========================================================================
   4. Bildirim merkezi (zil)
   ========================================================================= */

.tc-bell {
    position: relative;
    display: inline-flex;
}

.tc-bell__btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    color: var(--tc-muted);
    cursor: pointer;
    padding: 0;
    font-size: var(--tc-fs);
}

.tc-bell__btn:hover {
    color: var(--tc-primary);
}

/* Sayaç rozeti — sitenin gri sayaç dilinden ayrışsın diye turuncu.
   Kırmızı yerine turuncu: site paletinin ikinci rengi. */
.tc-bell__count {
    position: absolute;
    top: -6px;
    right: -12px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--tc-accent);
    color: #fff;
    font-size: 10px;
    line-height: 16px;
    text-align: center;
    display: none;
}

.tc-bell__count.is-visible {
    display: block;
}

.tc-bell.is-ringing .tc-bell__btn iconify-icon {
    animation: tcRing .7s ease;
    transform-origin: top center;
}

@keyframes tcRing {
    0%, 100% { transform: rotate(0); }
    20% { transform: rotate(12deg); }
    45% { transform: rotate(-9deg); }
    70% { transform: rotate(5deg); }
}

.tc-bell__panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 320px;
    max-width: 88vw;
    background: var(--tc-surface);
    border: 1px solid var(--tc-line);
    border-radius: var(--tc-radius);
    box-shadow: 0 4px 16px var(--tc-line);
    z-index: 1200;
    display: none;
    overflow: hidden;
}

.tc-bell__panel.is-open {
    display: block;
}

.tc-bell__panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--tc-line);
    font-size: var(--tc-fs);
    color: var(--tc-ink);
}

.tc-bell__status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--tc-fs-sm);
    color: var(--tc-muted);
}

.tc-bell__status::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #c4c4c4;
}

.tc-bell__status.is-live::before { background: var(--tc-success); }
.tc-bell__status.is-poll::before { background: var(--tc-accent); }

.tc-bell__list {
    max-height: 320px;
    overflow-y: auto;
}

.tc-bell__item {
    display: flex;
    gap: 9px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--tc-line);
    text-decoration: none;
    transition: background-color .12s ease;
}

.tc-bell__item:hover {
    background: #fafbfd;
}

.tc-bell__item-icon {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: var(--tc-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--tc-primary-soft);
    color: var(--tc-primary);
}

.tc-bell__item-icon--contact {
    background: var(--tc-accent-soft);
    color: #a35a06;
}

.tc-bell__item-body {
    min-width: 0;
    flex: 1 1 auto;
}

.tc-bell__item-title {
    display: block;
    font-size: var(--tc-fs);
    color: var(--tc-ink) !important;
    margin: 0 0 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tc-bell__item-preview {
    display: block;
    font-size: var(--tc-fs-sm);
    color: var(--tc-muted);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tc-bell__item-time {
    font-size: 10px;
    color: #9a9a9a;
    margin-top: 2px;
    display: block;
}

.tc-bell__empty {
    padding: 26px 14px;
    text-align: center;
    color: var(--tc-muted);
    font-size: var(--tc-fs);
}

.tc-bell__empty iconify-icon {
    color: #c4c4c4;
}

.tc-bell__foot {
    padding: 9px 14px;
    border-top: 1px solid var(--tc-line);
    text-align: center;
}

.tc-bell__foot a {
    font-size: var(--tc-fs);
    color: var(--tc-primary) !important;
}

/* Sağ altta beliren anlık uyarı */
.tc-toast-stack {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 1400;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 320px;
}

.tc-toast {
    display: flex;
    gap: 9px;
    padding: 10px 12px;
    border-radius: var(--tc-radius);
    background: var(--tc-surface);
    border: 1px solid var(--tc-line);
    border-left: 3px solid var(--tc-primary);
    box-shadow: 0 4px 16px var(--tc-line);
    text-decoration: none;
    animation: tcSlideIn .2s ease;
}

.tc-toast.is-leaving {
    animation: tcSlideOut .2s ease forwards;
}

@keyframes tcSlideIn {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: none; }
}

@keyframes tcSlideOut {
    to { opacity: 0; transform: translateX(20px); }
}

/* Panel yan menüsündeki okunmamış sayacı.
   Sitenin `.accordion-body a span { color: var(--text-color) }` kuralından
   daha yüksek özgüllük gerekiyor; aksi halde rozet metni okunmaz oluyordu. */
.accordion-body a .tc-menu-badge,
.tc-menu-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 17px;
    height: 17px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--tc-accent);
    color: #fff !important;
    font-size: 10px;
    line-height: 1;
}

/* İkincil bilgi (ör. profil doluluk yüzdesi) sitenin gri sayaç dilinde kalır */
.accordion-body a .tc-menu-note,
.tc-menu-note {
    color: var(--tc-muted) !important;
    font-size: var(--tc-fs-sm);
}

/* Bireysel üyeye kurumsal daveti — menünün içinde, turuncu vurgulu tek satır */
.accordion-body a.tc-menu-upgrade {
    color: var(--tc-accent) !important;
    margin-top: 4px;
    padding-top: 8px !important;
    border-top: 1px solid var(--tc-line);
}

.accordion-body a.tc-menu-upgrade iconify-icon {
    color: var(--tc-accent);
}

/* =========================================================================
   5. Canlı sohbet
   ========================================================================= */

.tc-chat {
    display: grid;
    grid-template-columns: 264px 1fr;
    /* Sabit yükseklik yerine esnek: az mesajda dev boşluk oluşmasın */
    height: clamp(400px, calc(100vh - 300px), 600px);
    background: var(--tc-surface);
    border: 1px solid var(--tc-line);
    border-radius: var(--tc-radius);
    overflow: hidden;
}

.tc-chat__aside {
    border-right: 1px solid var(--tc-line);
    display: flex;
    flex-direction: column;
    min-width: 0;
    /* min-height:0 olmadan alt kutunun overflow-y:auto'su devreye girmez */
    min-height: 0;
}

.tc-chat__aside-head {
    padding: 10px 12px;
    border-bottom: 1px solid var(--tc-line);
}

.tc-chat__search {
    width: 100%;
    border: none;
    border-radius: var(--tc-radius) !important;
    background-color: var(--tc-fill);
    padding: 7px 12px;
    font-size: var(--tc-fs);
}

.tc-chat__search:focus {
    outline: none;
    box-shadow: inset 0 0 0 1px var(--tc-primary);
}

.tc-chat__list {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
}

.tc-conv {
    display: flex;
    gap: 9px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--tc-line);
    cursor: pointer;
    transition: background-color .12s ease;
}

.tc-conv:hover {
    background: #fafbfd;
}

.tc-conv.is-active {
    background: var(--tc-primary-soft);
    box-shadow: inset 2px 0 0 var(--tc-primary);
}

.tc-conv__avatar {
    position: relative;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--tc-primary-soft) center/cover no-repeat;
    color: var(--tc-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--tc-fs-title);
    overflow: hidden;
}

.tc-conv__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tc-conv__dot {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #c4c4c4;
    border: 2px solid #fff;
}

.tc-conv__dot.is-online {
    background: var(--tc-success);
}

.tc-conv__body {
    flex: 1 1 auto;
    min-width: 0;
}

.tc-conv__name {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    font-size: var(--tc-fs);
    color: var(--tc-ink);
    margin: 0 0 1px;
}

.tc-conv__name > span:first-child {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tc-conv__time {
    flex: 0 0 auto;
    font-size: 10px;
    color: #9a9a9a;
}

.tc-conv__last {
    /* `overflow` ve `text-overflow` satır içi (inline) öğede işlemiyor:
       son mesaj "…" almadan ortasından kesiliyordu. */
    display: block;
    font-size: var(--tc-fs-sm);
    color: var(--tc-muted);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tc-conv__badge {
    flex: 0 0 auto;
    align-self: center;
    min-width: 17px;
    height: 17px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--tc-accent);
    color: #fff;
    font-size: 10px;
    line-height: 17px;
    text-align: center;
}

.tc-chat__main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    /* min-height:0 olmadan .tc-chat__body içerik boyuna uzar ve kaydırmaz */
    min-height: 0;
}

.tc-chat__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--tc-line);
}

.tc-chat__head-name {
    font-size: var(--tc-fs-title);
    font-weight: 500;
    color: var(--tc-ink);
    margin: 0;
}

.tc-chat__head-status {
    font-size: var(--tc-fs-sm);
    color: var(--tc-muted);
    margin: 0;
}

.tc-chat__head-status.is-online {
    color: var(--tc-success);
}

.tc-chat__body {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
    padding: 16px;
    background: var(--tc-bg);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Mesajları alta yasla; az mesajda üstte boşluk kalsın, kaydırma bozulmasın.
   (justify-content:flex-end kaydırmayı kırdığı için ::before hilesi kullanılır.) */
.tc-chat__body::before {
    content: '';
    margin-top: auto;
}

.tc-msg {
    max-width: 70%;
    align-self: flex-start;
}

.tc-msg--mine {
    align-self: flex-end;
}

.tc-msg__bubble {
    padding: 8px 12px;
    border-radius: var(--tc-radius) var(--tc-radius) var(--tc-radius) 2px;
    background: #fff;
    border: 1px solid var(--tc-line);
    font-size: var(--tc-fs);
    line-height: 1.6;
    color: var(--tc-ink);
    word-wrap: break-word;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.tc-msg--mine .tc-msg__bubble {
    border-radius: var(--tc-radius) var(--tc-radius) 2px var(--tc-radius);
    background: var(--tc-primary);
    border-color: var(--tc-primary);
    color: #fff;
}

.tc-msg__file {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 5px;
    padding: 6px 9px;
    border-radius: var(--tc-radius);
    background: rgba(0, 0, 0, .05);
    font-size: var(--tc-fs-sm);
    text-decoration: none;
    color: var(--tc-ink) !important;
}

.tc-msg--mine .tc-msg__file {
    background: rgba(255, 255, 255, .18);
    color: #fff !important;
}

.tc-msg__img {
    display: block;
    max-width: 220px;
    border-radius: var(--tc-radius);
    margin-top: 5px;
}

.tc-msg__meta {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 3px;
    font-size: 10px;
    color: #9a9a9a;
}

.tc-msg--mine .tc-msg__meta {
    justify-content: flex-end;
}

.tc-msg__tick {
    display: inline-flex;
    color: #9a9a9a;
}

.tc-msg__tick.is-read {
    color: var(--tc-primary);
}

.tc-chat__day {
    align-self: center;
    padding: 3px 10px;
    border-radius: var(--tc-radius);
    background: var(--tc-fill);
    color: var(--tc-muted);
    font-size: var(--tc-fs-sm);
}

.tc-typing {
    display: none;
    align-items: center;
    gap: 5px;
    padding: 0 16px 6px;
    font-size: var(--tc-fs-sm);
    color: var(--tc-muted);
    background: var(--tc-bg);
}

.tc-typing.is-active {
    display: flex;
}

.tc-typing__dots {
    display: inline-flex;
    gap: 3px;
}

.tc-typing__dots i {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--tc-muted);
    animation: tcBounce 1.1s infinite;
}

.tc-typing__dots i:nth-child(2) { animation-delay: .16s; }
.tc-typing__dots i:nth-child(3) { animation-delay: .32s; }

@keyframes tcBounce {
    0%, 60%, 100% { transform: translateY(0); opacity: .4; }
    30% { transform: translateY(-3px); opacity: 1; }
}

.tc-chat__composer {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    padding: 10px 12px;
    border-top: 1px solid var(--tc-line);
    background: #fff;
}

.tc-chat__composer textarea {
    flex: 1 1 auto;
    resize: none;
    max-height: 110px;
    min-height: 34px;
    border: none;
    border-radius: var(--tc-radius) !important;
    background-color: var(--tc-fill);
    padding: 8px 12px;
    font-size: var(--tc-fs) !important;
    line-height: 1.5;
    font-family: inherit;
}

.tc-chat__composer textarea:focus {
    outline: none;
    box-shadow: inset 0 0 0 1px var(--tc-primary);
}

.tc-chat__send {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: var(--tc-radius);
    background: var(--tc-primary);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color .15s ease;
}

.tc-chat__send:hover { background: var(--tc-primary-dark); }
.tc-chat__send[disabled] { opacity: .5; cursor: not-allowed; }

.tc-chat__attach {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border: 1px solid var(--tc-line-solid);
    border-radius: var(--tc-radius);
    background: #fff;
    color: var(--tc-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}

.tc-chat__attach:hover { color: var(--tc-primary); border-color: var(--tc-primary); }

.tc-chat__filechip {
    display: none;
    align-items: center;
    gap: 6px;
    margin: 0 12px 8px;
    padding: 5px 10px;
    border-radius: var(--tc-radius);
    background: var(--tc-primary-soft);
    color: var(--tc-primary);
    font-size: var(--tc-fs-sm);
    width: fit-content;
}

.tc-chat__filechip.is-visible { display: inline-flex; }

.tc-chat__empty {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--tc-muted);
    font-size: var(--tc-fs);
    text-align: center;
    padding: 32px 20px;
    background: var(--tc-bg);
}

.tc-chat__empty iconify-icon {
    color: #c9d3e0;
}

/* Mağaza kartındaki `.shop-profile-box iconify-icon` kuralı ikonlara 30px gri
   daire veriyor (iletişim satırları için tasarlanmış). Sohbet butonu ve notu
   aynı sarmalayıcıyı kullandığı için o davranış burada geri alınır. */
.shop-profile-box .tc-chat-cta iconify-icon,
.shop-profile-box .tc-chat-note iconify-icon {
    background: none;
    border: none;
    width: auto;
    height: auto;
    border-radius: 0;
    margin-right: 0;
    color: inherit;
}

/* Mağaza sayfasındaki sohbet butonu — .thm-btn ile aynı ölçü */
.tc-chat-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--tc-primary);
    border-radius: var(--tc-radius);
    background: var(--tc-primary);
    color: #fff !important;
    font-size: var(--tc-fs);
    cursor: pointer;
    text-decoration: none;
    transition: background-color .15s ease;
}

.tc-chat-cta:hover { background: var(--tc-primary-dark); }

.tc-chat-cta--ghost {
    background: #fff;
    color: var(--tc-primary) !important;
}

.tc-chat-cta--ghost:hover { background: var(--tc-primary-soft); }

.tc-chat-note {
    font-size: var(--tc-fs-sm);
    color: var(--tc-muted);
    text-align: center;
    margin: 7px 0 0;
    line-height: 1.6;
}

/* =========================================================================
   6. Gelen kutusu
   ========================================================================= */

.tc-inbox {
    background: var(--tc-surface);
    border: 1px solid var(--tc-line);
    border-radius: var(--tc-radius);
    overflow: hidden;
}

.tc-inbox__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 14px;
    border-bottom: 1px solid var(--tc-line);
    flex-wrap: wrap;
}

/* Sekmeler sitenin alt-çizgi dilinde (hap değil) */
.tc-inbox__tabs {
    display: flex;
    gap: 16px;
}

.tc-inbox__tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 11px 0;
    font-size: var(--tc-fs);
    color: var(--tc-muted) !important;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.tc-inbox__tab.is-active {
    color: var(--tc-primary) !important;
    border-bottom-color: var(--tc-primary);
}

.tc-inbox__count {
    font-size: var(--tc-fs-sm);
    color: var(--tc-muted);
}

.tc-inbox__item {
    display: block;
    padding: 12px 14px;
    border-bottom: 1px solid var(--tc-line);
    text-decoration: none;
    transition: background-color .12s ease;
}

.tc-inbox__item:last-child { border-bottom: none; }
.tc-inbox__item:hover { background: #fafbfd; }

.tc-inbox__item.is-unread {
    background: #fffdfa;
    box-shadow: inset 2px 0 0 var(--tc-accent);
}

.tc-inbox__item-top {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: space-between;
    margin-bottom: 3px;
    flex-wrap: wrap;
}

.tc-inbox__name {
    font-size: var(--tc-fs);
    color: var(--tc-ink);
}

.tc-inbox__subject {
    font-size: var(--tc-fs);
    color: var(--tc-ink);
    margin: 0 0 2px;
}

.tc-inbox__preview {
    font-size: var(--tc-fs-sm);
    color: var(--tc-muted);
    margin: 0;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tc-inbox__detail {
    background: var(--tc-surface);
    border: 1px solid var(--tc-line);
    border-radius: var(--tc-radius);
    padding: 16px;
    margin-bottom: 16px;
}

.tc-inbox__detail dl {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 6px 12px;
    margin: 0 0 14px;
    font-size: var(--tc-fs);
}

.tc-inbox__detail dt { color: var(--tc-muted); }
.tc-inbox__detail dd { margin: 0; color: var(--tc-ink); }

.tc-inbox__body {
    padding: 12px 14px;
    border-radius: var(--tc-radius);
    background: var(--tc-bg);
    border-left: 2px solid var(--tc-primary);
    font-size: var(--tc-fs);
    line-height: 1.7;
    white-space: pre-wrap;
}

/* =========================================================================
   7. Teklif talepleri
   ========================================================================= */

.tc-quote-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tc-quote-card {
    display: block;
    padding: 14px 16px;
    border: 1px solid var(--tc-line);
    border-radius: var(--tc-radius);
    background: var(--tc-surface);
    text-decoration: none;
    transition: border-color .15s ease, background-color .15s ease;
    margin-bottom: 10px;
}

.tc-quote-card:hover {
    border-color: #c3d3ea;
    background: #fcfdff;
}

.tc-quote-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 5px;
}

.tc-quote-card__title {
    font-size: var(--tc-fs-title);
    font-weight: 500;
    color: var(--tc-ink);
    line-height: 1.4;
}

.tc-quote-card__desc {
    font-size: var(--tc-fs);
    color: var(--tc-muted);
    line-height: 1.6;
    margin: 0 0 8px;
}

.tc-quote-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 14px;
    font-size: var(--tc-fs-sm);
    color: var(--tc-muted);
}

.tc-quote-card__meta > span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.tc-quote-card__meta iconify-icon {
    color: var(--tc-accent);
}

.tc-quote-card__age {
    margin-left: auto;
    color: #9a9a9a;
}

/* =========================================================================
   8. Harita
   ========================================================================= */

.tc-mini-map {
    width: 100%;
    height: 240px;
    border-radius: var(--tc-radius);
    border: 1px solid var(--tc-line);
    background: var(--tc-fill);
}

.tc-map {
    border: 1px solid var(--tc-line);
    border-radius: var(--tc-radius);
    background: var(--tc-surface);
    overflow: hidden;
}

.tc-map__bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--tc-line);
    flex-wrap: wrap;
}

.tc-map__filters {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.tc-map__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--tc-line-solid);
    border-radius: var(--tc-radius);
    background: #fff;
    color: var(--tc-muted);
    font-size: var(--tc-fs);
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}

.tc-map__chip:hover { border-color: #c3d3ea; }

.tc-map__chip.is-active {
    background: var(--tc-primary-soft);
    border-color: var(--tc-primary);
    color: var(--tc-primary);
}

.tc-map__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: inline-block;
    flex: 0 0 auto;
}

.tc-map__dot--magaza { background: var(--tc-primary); }
.tc-map__dot--talep  { background: var(--tc-accent); }

.tc-map__select {
    border: none;
    border-radius: var(--tc-radius) !important;
    background-color: var(--tc-fill);
    padding: 7px 10px;
    font-size: var(--tc-fs) !important;
    min-width: 160px;
}

.tc-map__count {
    margin-left: auto;
    font-size: var(--tc-fs-sm);
    color: var(--tc-muted);
}

.tc-map__body {
    display: grid;
    grid-template-columns: 1fr 280px;
    height: clamp(420px, calc(100vh - 320px), 640px);
}

.tc-map__canvas {
    width: 100%;
    height: 100%;
    background: var(--tc-fill);
}

.tc-map__side {
    border-left: 1px solid var(--tc-line);
    overflow-y: auto;
    background: var(--tc-bg);
}

.tc-map__item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--tc-line);
    cursor: pointer;
    transition: background-color .12s ease;
}

.tc-map__item:hover { background: #fff; }

.tc-map__item .tc-map__dot { margin-top: 4px; }

.tc-map__item-body { min-width: 0; }

.tc-map__item-title {
    display: block;
    font-size: var(--tc-fs);
    color: var(--tc-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tc-map__item-meta {
    display: block;
    font-size: var(--tc-fs-sm);
    color: var(--tc-muted);
    margin-top: 1px;
}

/* Google InfoWindow içeriği */
.tc-map__pop {
    max-width: 250px;
    min-width: 200px;
    padding: 2px 2px 4px;
    font-size: var(--tc-fs);
    line-height: 1.5;
}

/* Google'ın balon kabuğu varsayılan olarak fazla iç boşluk ve kalın bir
   kapatma düğmesi getiriyor; site diline yaklaştırılır. */
.gm-style .gm-style-iw-c {
    padding: 12px !important;
    border-radius: var(--tc-radius) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .18) !important;
}

.gm-style .gm-style-iw-d {
    overflow: hidden !important;
    padding: 0 !important;
}

.gm-style .gm-style-iw-c button.gm-ui-hover-effect {
    top: 2px !important;
    right: 2px !important;
    width: 26px !important;
    height: 26px !important;
    opacity: .5;
}

.gm-style .gm-style-iw-c button.gm-ui-hover-effect:hover {
    opacity: 1;
}

.tc-map__pop-tag {
    display: inline-block;
    padding: 2px 7px;
    border-radius: var(--tc-radius);
    font-size: 10px;
    margin-bottom: 5px;
}

.tc-map__pop-tag--magaza { background: var(--tc-primary-soft); color: var(--tc-primary); }
.tc-map__pop-tag--talep  { background: var(--tc-accent-soft); color: #a35a06; }

.tc-map__pop-title {
    font-size: var(--tc-fs-title);
    font-weight: 500;
    color: var(--tc-ink);
    margin: 0 0 3px;
}

.tc-map__pop-desc,
.tc-map__pop-meta {
    color: var(--tc-muted);
    margin: 0 0 4px;
    font-size: var(--tc-fs-sm);
    overflow-wrap: anywhere;
}

.tc-map__pop-meta {
    margin-bottom: 0;
}

.tc-map__pop-list {
    list-style: none;
    padding: 0;
    margin: 6px 0;
    font-size: var(--tc-fs-sm);
    color: var(--tc-ink);
}

.tc-map__pop-list li {
    padding: 2px 0;
    border-top: 1px solid var(--tc-line);
}

/* Bağlantı, düz metin gibi değil düğme gibi görünsün */
.tc-map__pop-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-top: 10px;
    padding: 7px 12px;
    border-radius: var(--tc-radius);
    background: var(--tc-primary);
    color: #fff !important;
    font-size: var(--tc-fs);
    text-decoration: none !important;
    transition: filter .15s ease;
}

.tc-map__pop-link:hover {
    filter: brightness(1.08);
    color: #fff !important;
}

.tc-map__pop-link:focus-visible {
    outline: 2px solid var(--tc-accent);
    outline-offset: 2px;
}

/* Teklif talebinde turuncu, mağazada mavi */
.tc-map__pop--talep .tc-map__pop-link {
    background: var(--tc-accent);
}

.tc-map__pop-title {
    /* Uzun başlık balonu taşırmasın */
    overflow-wrap: anywhere;
}

@media (max-width: 991px) {
    .tc-map__body {
        grid-template-columns: 1fr;
        height: auto;
    }

    .tc-map__canvas { height: 380px; }

    .tc-map__side {
        border-left: none;
        border-top: 1px solid var(--tc-line);
        max-height: 260px;
    }
}

/* =========================================================================
   9. Bildirim tercihleri, sohbet arama, yanıt hızı
   ========================================================================= */

.tc-pref {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 9px 0;
    border-bottom: 1px solid var(--tc-line);
    cursor: pointer;
    font-weight: 400;
}

.tc-pref:last-child { border-bottom: none; }

.tc-pref input[type="checkbox"] {
    width: auto !important;
    margin-top: 3px;
    flex: 0 0 auto;
}

/* <strong> satır içi kalır: tek satırlık onay metinleri ("KVKK metnini
   okudum") bölünmesin. Başlık+açıklama biçimindeki tercihlerde alttaki
   <em> zaten blok olduğu için başlık yine kendi satırında durur. */
.tc-pref strong {
    font-size: var(--tc-fs);
    font-weight: 500;
    color: var(--tc-ink);
}

.tc-pref em {
    display: block;
    font-style: normal;
    font-size: var(--tc-fs-sm);
    color: var(--tc-muted);
    line-height: 1.5;
    margin-top: 2px;
}

/* Sohbet listesinin üstünde açılan mesaj arama sonuçları */
.tc-search {
    display: none;
    position: absolute;
    left: 12px;
    right: 12px;
    top: calc(100% - 4px);
    z-index: 30;
    max-height: 320px;
    overflow-y: auto;
    background: var(--tc-surface);
    border: 1px solid var(--tc-line);
    border-radius: var(--tc-radius);
    box-shadow: 0 4px 16px var(--tc-line);
}

.tc-search.is-open { display: block; }

.tc-chat__aside-head { position: relative; }

.tc-search__head {
    padding: 8px 12px;
    border-bottom: 1px solid var(--tc-line);
    font-size: var(--tc-fs-sm);
    color: var(--tc-muted);
}

.tc-search__item {
    display: block;
    padding: 9px 12px;
    border-bottom: 1px solid var(--tc-line);
    cursor: pointer;
    transition: background-color .12s ease;
}

.tc-search__item:hover { background: #fafbfd; }

.tc-search__who {
    display: block;
    font-size: var(--tc-fs);
    color: var(--tc-primary);
}

.tc-search__who em {
    font-style: normal;
    color: var(--tc-muted);
}

.tc-search__text {
    display: block;
    font-size: var(--tc-fs-sm);
    color: var(--tc-ink);
    margin-top: 1px;
    overflow-wrap: anywhere;
}

.tc-search__date {
    display: block;
    font-size: 10px;
    color: #9a9a9a;
    margin-top: 2px;
}

/* "Daha eski mesajları yükle" */
.tc-chat__older {
    align-self: center;
    padding: 6px 14px;
    border: 1px solid var(--tc-line-solid);
    border-radius: var(--tc-radius);
    background: #fff;
    color: var(--tc-muted);
    font-size: var(--tc-fs-sm);
    cursor: pointer;
    margin-bottom: 4px;
    transition: color .15s ease, border-color .15s ease;
}

.tc-chat__older:hover:not([disabled]) {
    color: var(--tc-primary);
    border-color: var(--tc-primary);
}

/* Aramadan gelindiğinde bulunan mesaj kısa süre vurgulanır */
.tc-msg.is-found .tc-msg__bubble {
    box-shadow: 0 0 0 2px var(--tc-accent);
}

.tc-msg .tc-msg__bubble {
    transition: box-shadow .25s ease;
}

.tc-chat__older[disabled] { opacity: .6; cursor: default; }

/* Firma yanıt hızı rozeti */
.tc-response {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: var(--tc-radius);
    font-size: var(--tc-fs-sm);
    line-height: 1.6;
}

.tc-response--hizli { background: #eaf7f0; color: #14663f; }
.tc-response--orta  { background: var(--tc-accent-soft); color: #a35a06; }
.tc-response--yavas { background: var(--tc-fill); color: var(--tc-muted); }

/* =========================================================================
   10. Duyarlı düzen
   ========================================================================= */

@media (max-width: 991px) {
    .tc-chat {
        grid-template-columns: 1fr;
        height: auto;
    }

    .tc-chat__aside {
        border-right: none;
        border-bottom: 1px solid var(--tc-line);
        max-height: 220px;
    }

    .tc-chat__main { min-height: 420px; }
    .tc-chat__body { max-height: 340px; }

    /* Sohbet seçiliyken mobilde liste gizlenir */
    .tc-chat.is-mobile-detail .tc-chat__aside { display: none; }
}

@media (max-width: 767px) {
    .tc-wizard__body { padding: 14px; }
    .tc-wizard__head { padding: 12px 14px 0; }
    .tc-wizard__foot { padding: 12px 14px; }
    .tc-steps__item { min-width: 62px; }
    .tc-steps__label { display: none; }
    .tc-msg { max-width: 86%; }
    .tc-bell__panel { width: 290px; }
    .tc-inbox__detail dl { grid-template-columns: 1fr; gap: 2px 0; }
    .tc-inbox__detail dt { margin-top: 8px; }
    .tc-toast-stack { left: 12px; right: 12px; max-width: none; }
    .tc-type-grid { grid-template-columns: 1fr; }
}

/* =========================================================================
   10) Sesli / görüntülü arama
   =========================================================================
   Arama katmanı site genelinde tek kopya durur ve yalnızca aktif aramada
   görünür. Düğme grupları `data-mod` değerine göre gösterilir; böylece
   gelen/giden/görüşme aşamaları tek işaretlemeyle yönetilir.
   ========================================================================= */

/* Sohbet başlığındaki arama düğmeleri sağa yaslanır */
.tc-chat__head-actions {
    margin-left: auto;
    display: flex;
    gap: 6px;
}

.tc-call-trigger {
    color: var(--tc-primary);
}

.tc-call-trigger:hover {
    background: var(--tc-primary-soft);
}

/* Paket kapalıysa düğme durur ama kilitli görünür: özellik keşfedilebilir
   kalsın, basınca paket sayfasına yönlendirilsin. */
.tc-call-trigger[data-kilitli="1"] {
    position: relative;
    color: var(--tc-muted);
    opacity: .55;
}

.tc-call-trigger[data-kilitli="1"]::after {
    content: '';
    position: absolute;
    top: 4px;
    right: 3px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--tc-accent);
}

.tc-call-trigger[data-kilitli="1"]:hover {
    background: var(--tc-fill);
    opacity: .85;
}

/* --- Sohbet akışındaki arama kaydı --- */

.tc-callcard {
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 90%;
    padding: 5px 12px;
    border: 1px solid var(--tc-line-solid);
    border-radius: 999px;
    background: var(--tc-surface);
    color: var(--tc-muted);
    font-size: var(--tc-fs-sm);
}

.tc-callcard--missed {
    border-color: #f0cfcf;
    background: #fdf3f3;
    color: var(--tc-danger);
}

.tc-callcard__time {
    color: var(--tc-muted);
    opacity: .8;
}

/* --- Arama katmanı --- */

.tc-call {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(12, 20, 32, .72);
}

.tc-call[hidden] {
    display: none;
}

body.tc-call-acik {
    overflow: hidden;
}

.tc-call__box {
    position: relative;
    width: 100%;
    max-width: 420px;
    padding: 28px 22px 22px;
    border-radius: 16px;
    background: var(--tc-surface);
    box-shadow: 0 18px 48px rgba(0, 0, 0, .32);
    text-align: center;
    overflow: hidden;
}

/* Görüntülü aramada karşı tarafın görüntüsü kutuyu kaplar */
.tc-call__remote {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #0c1420;
}

.tc-call__remote[hidden] {
    display: none;
}

/* Görüntü açıkken metinler okunur kalsın */
/* Görüntülü aramada kutu, karşı tarafın görüntüsüne yer açacak kadar uzar */
.tc-call.is-video .tc-call__box {
    min-height: min(70vh, 480px);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.tc-call.is-video .tc-call__head {
    min-height: 0;
    margin-top: auto;
}

.tc-call.is-video .tc-call__head,
.tc-call.is-video .tc-call__actions {
    position: relative;
    z-index: 1;
}

.tc-call.is-video .tc-call__name,
.tc-call.is-video .tc-call__type,
.tc-call.is-video .tc-call__status,
.tc-call.is-video .tc-call__timer {
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}

.tc-call__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-height: 150px;
    justify-content: center;
}

.tc-call__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    margin-bottom: 6px;
    border-radius: 50%;
    background: var(--tc-primary-soft);
    color: var(--tc-primary);
}

.tc-call.is-video .tc-call__avatar {
    display: none;
}

.tc-call__name {
    margin: 0;
    font-size: var(--tc-fs-title);
    font-weight: 500;
    color: var(--tc-ink);
}

.tc-call__type,
.tc-call__status {
    margin: 0;
    font-size: var(--tc-fs);
    color: var(--tc-muted);
}

.tc-call__timer {
    margin: 2px 0 0;
    font-size: var(--tc-fs-title);
    font-variant-numeric: tabular-nums;
    color: var(--tc-primary);
}

.tc-call__timer[hidden] {
    display: none;
}

.tc-call__error {
    position: relative;
    z-index: 1;
    margin: 10px 0 0;
    padding: 8px 12px;
    border-radius: var(--tc-radius);
    background: #fdf3f3;
    color: var(--tc-danger);
    font-size: var(--tc-fs-sm);
}

.tc-call__error[hidden] {
    display: none;
}

/* Kendi görüntünüz sağ üstte küçük pencerede */
.tc-call__local {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    width: 92px;
    height: 122px;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, .85);
    border-radius: 10px;
    background: #0c1420;
}

.tc-call__local[hidden] {
    display: none;
}

.tc-call__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 18px;
}

.tc-call__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border: none;
    border-radius: 999px;
    font-size: var(--tc-fs);
    color: #fff;
    cursor: pointer;
    transition: filter .15s ease;
}

.tc-call__btn:hover {
    filter: brightness(1.08);
}

.tc-call__btn[hidden] {
    display: none;
}

.tc-call__btn--accept  { background: var(--tc-success); }
.tc-call__btn--reject,
.tc-call__btn--hangup   { background: var(--tc-danger); }

.tc-call__btn--toggle {
    padding: 10px;
    background: var(--tc-fill);
    color: var(--tc-ink);
}

.tc-call__btn--toggle.is-kapali {
    background: var(--tc-danger);
    color: #fff;
}

/* Aşamaya göre hangi düğmelerin görüneceği */
.tc-call[data-mod="gelen"] .tc-call__btn--hangup,
.tc-call[data-mod="gelen"] .tc-call__btn--toggle,
.tc-call[data-mod="giden"] .tc-call__btn--accept,
.tc-call[data-mod="giden"] .tc-call__btn--reject,
.tc-call[data-mod="giden"] .tc-call__btn--toggle,
.tc-call[data-mod="gorusme"] .tc-call__btn--accept,
.tc-call[data-mod="gorusme"] .tc-call__btn--reject {
    display: none;
}

@media (max-width: 575px) {
    .tc-call__box { max-width: none; padding: 22px 16px 18px; }
    .tc-call__btn span { display: none; }
    .tc-call__btn { padding: 12px; }
    .tc-call__local { width: 76px; height: 100px; }
}

/* =========================================================================
   11) Sesli mesaj
   =========================================================================
   Kayıt sürerken yazma alanının üstünde ayrı bir şerit açılır; oynatıcı
   ise mesaj balonunun içinde durur.
   ========================================================================= */

.tc-voice {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-top: 1px solid var(--tc-line);
    background: #fdf3f3;
    font-size: var(--tc-fs);
}

.tc-voice[hidden] {
    display: none;
}

/* Kayıt sürerken metin girişi devre dışı görünür */
.tc-chat__composer.is-kayitta {
    opacity: .45;
    pointer-events: none;
}

.tc-voice__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--tc-danger);
    animation: tc-voice-pulse 1.2s ease-in-out infinite;
}

@keyframes tc-voice-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: .25; }
}

@media (prefers-reduced-motion: reduce) {
    .tc-voice__dot { animation: none; }
}

.tc-voice__label {
    color: var(--tc-danger);
}

.tc-voice__time {
    margin-right: auto;
    font-variant-numeric: tabular-nums;
    color: var(--tc-muted);
}

.tc-voice__btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border: none;
    border-radius: var(--tc-radius);
    font-size: var(--tc-fs);
    cursor: pointer;
}

.tc-voice__btn--cancel {
    background: var(--tc-fill);
    color: var(--tc-muted);
}

.tc-voice__btn--send {
    background: var(--tc-primary);
    color: #fff;
}

.tc-voice__btn:hover {
    filter: brightness(1.06);
}

/* --- Balondaki oynatıcı --- */

.tc-msg__bubble--voice {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
}

/* Yerleşik oynatıcı denetimleri koyu renktir; kendi mesajınızın mavi
   zemininde okunmaz. Ses balonu bu yüzden her iki tarafta da açık kalır. */
.tc-msg--mine .tc-msg__bubble--voice {
    background: var(--tc-surface);
    border: 1px solid var(--tc-line-solid);
    color: var(--tc-ink);
}

.tc-voice__player {
    height: 32px;
    max-width: 220px;
}

.tc-voice__len {
    font-size: var(--tc-fs-sm);
    color: var(--tc-muted);
    font-variant-numeric: tabular-nums;
}

/* Ses balonu açık zeminde olduğundan süre metni de koyu kalır */
.tc-msg--mine .tc-voice__len {
    color: var(--tc-muted);
}

@media (max-width: 575px) {
    .tc-voice__player { max-width: 150px; }
    .tc-voice__btn span { display: none; }
}

/* =========================================================================
   12) Üyelik paketleri
   =========================================================================
   Fiyat kartları, karşılaştırma tablosu ve onay ekranı. Renkler site
   paletinden gelir; paket rengine göre yalnızca vurgu şeridi değişir.
   ========================================================================= */

.tc-pricing__intro {
    margin-bottom: 18px;
}

.tc-pricing__lead {
    max-width: 620px;
    margin: 4px 0 12px;
    color: var(--tc-muted);
    font-size: var(--tc-fs);
}

/* Aylık / yıllık seçimi */
.tc-pricing__toggle {
    display: inline-flex;
    padding: 3px;
    border: 1px solid var(--tc-line-solid);
    border-radius: 999px;
    background: var(--tc-surface);
}

.tc-pricing__toggle a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    border-radius: 999px;
    color: var(--tc-muted) !important;
    font-size: var(--tc-fs);
    text-decoration: none;
}

.tc-pricing__toggle a.is-active {
    background: var(--tc-primary);
    color: #fff !important;
}

.tc-pricing__toggle a span {
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--tc-accent-soft);
    color: var(--tc-accent);
    font-size: var(--tc-fs-sm);
}

.tc-pricing__toggle a.is-active span {
    background: rgba(255, 255, 255, .2);
    color: #fff;
}

/* --- Paket kartları --- */

.tc-pricing {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    align-items: stretch;
}

.tc-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 20px 18px;
    border: 1px solid var(--tc-line-solid);
    border-radius: var(--tc-radius);
    background: var(--tc-surface);
    box-shadow: 0 1px 2px var(--tc-line);
}

/* Paket rengine göre üst şerit */
.tc-plan::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    border-radius: var(--tc-radius) var(--tc-radius) 0 0;
    background: var(--tc-line-solid);
}

.tc-plan--blue::before   { background: var(--tc-primary); }
.tc-plan--orange::before { background: var(--tc-accent); }

.tc-plan.is-featured {
    border-color: var(--tc-primary);
}

.tc-plan.is-current {
    border-color: var(--tc-success);
    background: #f7fcf9;
}

.tc-plan--wide {
    max-width: 560px;
}

.tc-plan__flag {
    position: absolute;
    top: -10px;
    right: 14px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--tc-primary);
    color: #fff;
    font-size: var(--tc-fs-sm);
}

.tc-plan__head {
    margin-bottom: 10px;
}

.tc-plan__badge {
    width: 26px;
    height: 26px;
    margin-bottom: 6px;
}

.tc-plan__name {
    margin: 0;
    font-size: var(--tc-fs-title);
    font-weight: 500;
    color: var(--tc-ink);
}

/* Açıklama iki satıra kadar yer ayırır: bir paketin açıklaması ikinci
   satıra taşınca o karttaki fiyat, özellik listesi ve düğme komşularından
   aşağı kayıyor, üç kart birbirini tutmuyordu. */
.tc-plan__desc {
    margin: 2px 0 0;
    color: var(--tc-muted);
    font-size: var(--tc-fs);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.9em;
}

.tc-plan__price {
    margin: 4px 0 0;
    font-size: 24px;
    font-weight: 500;
    color: var(--tc-ink);
    line-height: 1.2;
}

.tc-plan__price span {
    font-size: var(--tc-fs);
    font-weight: 400;
    color: var(--tc-muted);
}

/* Tasarruf notu yalnızca yıllık ücretli paketlerde var; satır her kartta
   yerini korusun ki özellik listeleri aynı yükseklikte başlasın. */
.tc-plan__note {
    margin: 2px 0 0;
    color: var(--tc-success);
    font-size: var(--tc-fs-sm);
}

.tc-plan__pricebox {
    min-height: 62px;
}

.tc-plan__features {
    list-style: none;
    margin: 14px 0 18px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.tc-plan__features li {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    color: var(--tc-muted);
    font-size: var(--tc-fs);
}

.tc-plan__features iconify-icon {
    flex: none;
    margin-top: 2px;
    color: var(--tc-success);
}

.tc-plan__features--flat {
    margin: 6px 0 0;
}

/* Düğme her kartta aynı hizada dursun */
/* Düğmeler kartın altına yaslanır ama üstündeki içeriğe yapışmasın:
   margin-top:auto tek başına boşluk bırakmıyordu. */
.tc-plan__action {
    margin-top: auto;
    padding-top: 14px;
}

.tc-plan__current {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--tc-success);
    font-size: var(--tc-fs);
}

/* --- Karşılaştırma tablosu --- */

.tc-compare-wrap {
    margin-top: 24px;
}

/* Dar ekranda tablo kendi içinde kayar; sayfa yatayda taşmaz */
.tc-compare-scroll {
    overflow-x: auto;
    border: 1px solid var(--tc-line-solid);
    border-radius: var(--tc-radius);
    background: var(--tc-surface);
}

.tc-compare {
    width: 100%;
    min-width: 480px;
    border-collapse: collapse;
    font-size: var(--tc-fs);
}

.tc-compare th,
.tc-compare td {
    padding: 9px 14px;
    text-align: left;
    border-bottom: 1px solid var(--tc-line);
}

.tc-compare thead th {
    color: var(--tc-ink);
    font-weight: 500;
    background: var(--tc-bg);
}

.tc-compare td {
    color: var(--tc-muted);
}

.tc-compare tbody tr:last-child th,
.tc-compare tbody tr:last-child td {
    border-bottom: none;
}

.tc-compare .is-current {
    background: #f7fcf9;
}

.tc-compare__yes  { color: var(--tc-success); }
.tc-compare__no   { color: var(--tc-line-solid); }

.tc-compare--orders code {
    font-size: var(--tc-fs-sm);
    color: var(--tc-muted);
}

/* --- Onay ekranı --- */

.tc-alert {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 14px;
    padding: 11px 14px;
    border-radius: var(--tc-radius);
    font-size: var(--tc-fs);
}

.tc-alert--info {
    background: var(--tc-primary-soft);
    color: var(--tc-primary);
}

.tc-alert iconify-icon {
    flex: none;
    margin-top: 2px;
}

.tc-checkout {
    border: 1px solid var(--tc-line-solid);
    border-radius: var(--tc-radius);
    background: var(--tc-surface);
    overflow: hidden;
}

.tc-checkout__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--tc-line);
    font-size: var(--tc-fs);
    color: var(--tc-muted);
}

.tc-checkout__row:last-child {
    border-bottom: none;
}

.tc-checkout__row strong {
    color: var(--tc-ink);
    font-weight: 500;
    text-align: right;
}

.tc-checkout__row--total {
    background: var(--tc-bg);
}

.tc-checkout__row--total strong {
    font-size: var(--tc-fs-title);
}

.tc-checkout__form {
    margin-top: 16px;
}

@media (max-width: 991px) {
    .tc-pricing { grid-template-columns: 1fr; }
    .tc-plan__flag { right: 12px; }
}

/* =========================================================================
   13) Harita kartları
   =========================================================================
   Nokta işaretçisinin üstünde duran küçük bilgi kartı. Yatayda ortalanır,
   noktanın hemen üzerine oturur; imleç etkileşimi kartın kendisinde olur.
   ========================================================================= */

.tc-map__card {
    position: absolute;
    transform: translate(-50%, calc(-100% - 12px));
    max-width: 190px;
    padding: 5px 9px;
    border: 1px solid var(--tc-line-solid);
    border-top: 2px solid var(--tc-primary);
    border-radius: 6px;
    background: var(--tc-surface);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .16);
    cursor: pointer;
    /* Üst üste binen kartlarda imleçle öne gelen okunur olsun */
    z-index: 1;
}

.tc-map__card:hover {
    z-index: 2;
    border-color: var(--tc-primary);
}

.tc-map__card--talep {
    border-top-color: var(--tc-accent);
}

.tc-map__card--talep:hover {
    border-color: var(--tc-accent);
}

/* Noktaya bağlayan küçük ok */
.tc-map__card::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -5px;
    width: 8px;
    height: 8px;
    transform: translateX(-50%) rotate(45deg);
    border-right: 1px solid var(--tc-line-solid);
    border-bottom: 1px solid var(--tc-line-solid);
    background: var(--tc-surface);
}

.tc-map__card-title,
.tc-map__card-meta {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tc-map__card-title {
    font-size: var(--tc-fs-sm);
    font-weight: 500;
    color: var(--tc-ink);
    line-height: 1.35;
}

.tc-map__card-meta {
    font-size: 10px;
    color: var(--tc-muted);
    line-height: 1.35;
}

@media (max-width: 575px) {
    .tc-map__card { max-width: 140px; }
}

/* =========================================================================
   14) Reklam paylaşımı
   =========================================================================
   Alan kartları, gün takvimi ve gerçek ölçekli önizleme.
   ========================================================================= */

.tc-ad__step {
    margin: 22px 0 10px;
    padding-top: 18px;
    border-top: 1px solid var(--tc-line);
    font-size: var(--tc-fs-title);
    font-weight: 500;
    color: var(--tc-ink);
}

.tc-ad__step:first-of-type {
    margin-top: 16px;
    padding-top: 0;
    border-top: none;
}

.tc-ad__hint {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 8px 0 0;
    color: var(--tc-muted);
    font-size: var(--tc-fs-sm);
}

/* --- Alan kartları --- */

.tc-ad__slots {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 10px;
}

.tc-ad__slot {
    position: relative;
    /* style.css'te `label { display:flex !important; align-items:center }`
       var; şema metnin yanına sıkışıyordu. Sütuna çevrilir. */
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    padding: 12px 14px;
    border: 1px solid var(--tc-line-solid);
    border-radius: var(--tc-radius);
    background: var(--tc-surface);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.tc-ad__slot:hover {
    border-color: var(--tc-primary);
}

.tc-ad__slot input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.tc-ad__slot.is-secili {
    border-color: var(--tc-primary);
    background: var(--tc-primary-soft);
}

.tc-ad__slot-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.tc-ad__slot-name {
    font-size: var(--tc-fs-title);
    font-weight: 500;
    color: var(--tc-ink);
}

.tc-ad__slot-where {
    font-size: var(--tc-fs-sm);
    color: var(--tc-primary);
}

.tc-ad__slot-desc {
    font-size: var(--tc-fs-sm);
    color: var(--tc-muted);
}

.tc-ad__slot-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--tc-line);
    font-size: var(--tc-fs-sm);
}

.tc-ad__slot-size  { color: var(--tc-muted); }
.tc-ad__slot-price { color: var(--tc-accent); font-weight: 500; }

/* --- Takvim --- */

.tc-ad__calwrap {
    /* Takvim sayfa genişliğine yayılırsa kareler devasa olur; gerçek bir
       tarih seçici ölçüsünde tutulur. */
    max-width: 420px;
    padding: 12px;
    border: 1px solid var(--tc-line-solid);
    border-radius: var(--tc-radius);
    background: var(--tc-surface);
}

.tc-ad__calhead {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 10px;
    font-size: var(--tc-fs-title);
    color: var(--tc-ink);
}

.tc-ad__cal {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.tc-ad__calname {
    padding: 4px 0;
    text-align: center;
    font-size: var(--tc-fs-sm);
    color: var(--tc-muted);
}

.tc-ad__day {
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--tc-line-solid);
    border-radius: 6px;
    background: var(--tc-surface);
    color: var(--tc-ink);
    font-size: var(--tc-fs);
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease;
}

.tc-ad__day:hover:not([disabled]) {
    border-color: var(--tc-primary);
    background: var(--tc-primary-soft);
}

.tc-ad__day--bos {
    border: none;
    background: none;
    cursor: default;
}

.tc-ad__day--kapali {
    color: #bbb;
    background: var(--tc-bg);
    cursor: not-allowed;
}

/* Dolu gün: başkası almış */
.tc-ad__day--dolu {
    border-color: #f0cfcf;
    background: #fdf3f3;
    color: #c98a8a;
}

.tc-ad__day.is-secili {
    border-color: var(--tc-primary);
    background: var(--tc-primary);
    color: #fff;
}

.tc-ad__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 10px 0 0;
    font-size: var(--tc-fs-sm);
    color: var(--tc-muted);
}

.tc-ad__legend span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.tc-ad__dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    border: 1px solid var(--tc-line-solid);
}

.tc-ad__dot--secili { background: var(--tc-primary); border-color: var(--tc-primary); }
.tc-ad__dot--dolu   { background: #fdf3f3; border-color: #f0cfcf; }
.tc-ad__dot--kapali { background: var(--tc-bg); }

/* --- Dosya notu --- */

.tc-ad__filenote {
    margin-top: 8px;
    padding: 8px 12px;
    border-radius: var(--tc-radius);
    font-size: var(--tc-fs-sm);
}

.tc-ad__filenote[hidden] { display: none; }
.tc-ad__filenote.is-uygun    { background: #f0f9f4; color: var(--tc-success); }
.tc-ad__filenote.is-uygunsuz { background: #fdf3f3; color: var(--tc-danger); }

/* --- Önizleme --- */

.tc-ad__preview {
    padding: 16px;
    border: 1px dashed var(--tc-line-solid);
    border-radius: var(--tc-radius);
    background: var(--tc-bg);
}

.tc-ad__preview-empty {
    margin: 0;
    color: var(--tc-muted);
    font-size: var(--tc-fs);
    text-align: center;
}

.tc-ad__frame[hidden] { display: none; }

.tc-ad__frame {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.tc-ad__frame-label {
    font-size: var(--tc-fs-sm);
    color: var(--tc-primary);
}

/* Kutu, alanın sitedeki gerçek ölçüsünde; dar ekranda küçülür */
.tc-ad__frame-box {
    max-width: 100%;
    overflow: hidden;
    border: 1px solid var(--tc-line-solid);
    border-radius: 4px;
    background: var(--tc-surface);
}

.tc-ad__frame-box img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tc-ad__frame-note {
    font-size: var(--tc-fs-sm);
    color: var(--tc-muted);
}

/* Yönlendirme adresi alanı site geneli dar input genişliğini almamalı */
.tc-ad__url {
    margin-top: 14px;
}

.tc-ad__url label {
    display: block;
    margin-bottom: 4px;
    font-size: var(--tc-fs);
    color: var(--tc-ink);
}

.tc-ad__url input {
    width: 100%;
}

.tc-ad__reject {
    display: block;
    margin-top: 2px;
    color: var(--tc-danger);
    font-size: var(--tc-fs-sm);
}

@media (max-width: 575px) {
    .tc-ad__slots { grid-template-columns: 1fr; }
    .tc-ad__day { font-size: var(--tc-fs-sm); }
}

/* --- Reklam alanı konum şeması ---------------------------------------
   Sayfanın basitleştirilmiş maketi; seçilen alan turuncu vurgulanır.
   Kullanıcı alanın nereye düştüğünü metni okumadan anlar. */

.tc-schema {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 92px;
    gap: 3px;
    padding: 5px;
    border: 1px solid var(--tc-line-solid);
    border-radius: 6px;
    background: var(--tc-bg);
}

.tc-schema__row {
    display: flex;
    gap: 3px;
}

.tc-schema__row--head { align-items: center; }
.tc-schema__row--body { height: 46px; }
.tc-schema__row--strip { height: 14px; }

.tc-schema__logo {
    width: 22px;
    height: 8px;
    border-radius: 2px;
    background: #d5dbe4;
}

.tc-schema__search {
    flex: 1;
    height: 8px;
    border-radius: 2px;
    background: #e6eaef;
}

.tc-schema__box {
    flex: 1;
    min-height: 8px;
    border-radius: 2px;
    background: #d5dbe4;
}

.tc-schema__row--head .tc-schema__box { max-width: 34px; height: 10px; }

.tc-schema__side {
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 32%;
}

.tc-schema__line {
    height: 5px;
    border-radius: 2px;
    background: #e6eaef;
}

.tc-schema__box--tall { flex: 1; }

.tc-schema__main {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3px;
}

.tc-schema__card {
    border-radius: 2px;
    background: #e6eaef;
}

/* Vurgulanan alan */
.tc-schema__box.is-active {
    background: var(--tc-accent);
    box-shadow: 0 0 0 1px var(--tc-accent);
}

/* Seçili kartta şema biraz daha belirgin */
.tc-ad__slot.is-secili .tc-schema {
    border-color: var(--tc-primary);
    background: #fff;
}

/* Şema kartın üstünde durur */
.tc-ad__slot .tc-schema {
    margin-bottom: 10px;
}

/* --- "Sitede nasıl görünecek" önizlemesi -----------------------------
   Ana sayfa bir iframe'de açılır; yüklenen görsel ilgili reklam alanına
   yerleştirilip turuncu çerçeveyle vurgulanır. Sayfa geniş olduğu için
   ölçeklenerek panele sığdırılır. */

.tc-ad__site {
    margin-top: 16px;
    border: 1px solid var(--tc-line-solid);
    border-radius: var(--tc-radius);
    background: var(--tc-surface);
    overflow: hidden;
}

.tc-ad__site[hidden] { display: none; }

.tc-ad__site-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding: 9px 14px;
    border-bottom: 1px solid var(--tc-line);
    background: var(--tc-bg);
}

.tc-ad__site-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--tc-fs);
    font-weight: 500;
    color: var(--tc-ink);
}

.tc-ad__site-note {
    font-size: var(--tc-fs-sm);
    color: var(--tc-muted);
}

/* Sahne: 1280px genişliğindeki sayfa panele ölçeklenerek sığdırılır */
.tc-ad__site-stage {
    position: relative;
    height: 460px;
    overflow: hidden;
    background: #f4f6f9;
}

.tc-ad__site-stage iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 1280px;
    height: 700px;
    border: 0;
    transform: scale(.72);
    transform-origin: 0 0;
    /* Statik önizleme; tıklama beklenmiyor */
    pointer-events: none;
}

@media (max-width: 991px) {
    .tc-ad__site-stage { height: 360px; }
    .tc-ad__site-stage iframe { transform: scale(.52); }
}

@media (max-width: 575px) {
    .tc-ad__site-stage { height: 280px; }
    .tc-ad__site-stage iframe { transform: scale(.38); }
}

/* =========================================================================
   15) Uyum katmanı — eski sayfaları tek tasarım çizgisine çeker
   =========================================================================
   Sitenin ilk yazılan sayfaları (giriş, ilan listeleri, mağaza sayfaları,
   genel sayfalar, ilan yönetimi) `style.css` deyimlerini kullanıyor; sonradan
   yazılanlar ise buradaki `tc-*` bileşen sistemini. İkisi yan yana farklı
   görünüyordu.

   Bu bölüm eski sınıfları YENİDEN YAZMADAN, yalnızca görünümlerini bileşen
   diline eşitler: aynı köşe yarıçapı, aynı çizgi rengi, aynı gölge, aynı
   düğme ve alan ritmi. Böylece 25'ten fazla sayfa işaretlemesine
   dokunmadan aynı çizgiye gelir.
   ========================================================================= */

/* --- Sayfa ritmi --- */

.main-area {
    margin: 24px 0 32px;
}

/* --- Bölüm başlıkları ---
   Eski sayfalarda başlık kimi yerde <h3>, kimi yerde .thm-title. İkisi de
   aynı görünür: 16px, alt ince çizgi. */

.main-area > .container > h1,
.main-area > .container > h2,
.main-area > .container > h3,
.main-area > .container > h4,
.main-area .container > .row > [class^="col"] > h3:first-child,
.main-area .container > .row > [class^="col"] > h4:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 14px;
    padding: 0 0 6px;
    border-bottom: 1px solid var(--tc-line);
    font-size: var(--tc-fs-title);
    font-weight: 500;
    color: var(--tc-ink);
}

/* --- Düğmeler ---
   .thm-btn zorunlu tam genişlikti; bir satırda iki düğme yan yana
   konamıyordu. Genişlik içeriğe bırakılır, `.d-grid` içinde yine yayılır. */

.thm-btn {
    width: auto;
    gap: 5px;
    padding: 8px 16px;
    border-radius: var(--tc-radius);
    transition: filter .15s ease;
}

.thm-btn:hover {
    filter: brightness(1.08);
    color: #fff;
}

.d-grid > .thm-btn,
.thm-btn.w-100 {
    width: 100%;
}

.thm-btn iconify-icon {
    margin: 0;
}

/* İkincil eylem: aynı ölçü, sakin görünüm */
.thm-btn--ghost {
    background: var(--tc-surface);
    border: 1px solid var(--tc-line-solid);
    color: var(--tc-ink);
}

.thm-btn--ghost:hover {
    border-color: var(--tc-primary);
    color: var(--tc-primary);
    filter: none;
}

/* --- Kartlar ---
   Ürün ve mağaza kutuları bileşen kartlarıyla aynı kenarlık/gölge/yarıçapı
   kullanır; hover'da aynı vurgu. */

.product-box,
.shop-box,
.blog-box,
.promo-box {
    border: 1px solid var(--tc-line-solid) !important;
    border-radius: var(--tc-radius);
    background: var(--tc-surface);
    box-shadow: 0 1px 2px var(--tc-line) !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.product-box:hover,
.shop-box:hover,
.blog-box:hover {
    border-color: var(--tc-primary) !important;
    box-shadow: 0 4px 14px var(--tc-line) !important;
}

/* --- Form alanları ---
   Etiket ritmi ve odak halkası her sayfada aynı. */

.main-area label,
.profile-form label,
.contact-form label {
    margin-bottom: 4px;
    color: var(--tc-ink);
}

/* Zorunlu işareti sakin bir vurgu; kırmızı "Zorunlu" etiketi bağırıyordu */
.main-area label .text-danger,
.profile-form label .text-danger {
    color: var(--tc-danger) !important;
    font-size: var(--tc-fs-sm);
    font-weight: 400;
}

/* Etiketin sağındaki yardımcı bağlantı (ör. "Şifremi unuttum") */
.tc-field__aside {
    margin-left: auto;
    color: var(--tc-muted) !important;
    font-size: var(--tc-fs-sm);
    font-weight: 400;
    text-decoration: none !important;
}

.tc-field__aside:hover {
    color: var(--tc-primary) !important;
}

/* --- Sayfalama --- */

.pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
}

.pagination .page-link,
.pagination a,
.pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 9px;
    border: 1px solid var(--tc-line-solid) !important;
    border-radius: var(--tc-radius);
    background: var(--tc-surface);
    color: var(--tc-muted) !important;
    font-size: var(--tc-fs);
    text-decoration: none;
}

.pagination .active .page-link,
.pagination .active > span {
    border-color: var(--tc-primary) !important;
    background: var(--tc-primary);
    color: #fff !important;
}

.pagination .page-link:hover {
    border-color: var(--tc-primary) !important;
    color: var(--tc-primary) !important;
}

/* --- Bilgi/uyarı şeritleri ---
   Yerleşimdeki .alert kutuları bileşen diline çekilir. */

.alert {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 11px 16px;
    border: none;
    border-radius: 0;
    font-size: var(--tc-fs);
}

.alert-success { background: #f0f9f4; color: var(--tc-success); }
.alert-danger  { background: #fdf3f3; color: var(--tc-danger); }

/* --- Geri dön bağlantısı ---
   Siyah çip site paletinin dışındaydı; sakin bir ikincil düğmeye çevrilir. */

.thm-back {
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    padding: 6px 12px !important;
    border: 1px solid var(--tc-line-solid);
    border-radius: var(--tc-radius) !important;
    background: var(--tc-surface) !important;
    color: var(--tc-muted) !important;
    font-size: var(--tc-fs);
    text-decoration: none !important;
}

.thm-back:hover {
    border-color: var(--tc-primary);
    color: var(--tc-primary) !important;
}

/* --- Dil sekmeleri ---
   İlan formundaki TR/EN/DE… düğmeleri bir sekme şeridi gibi görünür. */

.lang-btn {
    min-width: 42px;
    margin: 0 4px 4px 0;
    padding: 5px 10px !important;
    border: 1px solid var(--tc-line-solid) !important;
    border-radius: var(--tc-radius) !important;
    background: var(--tc-surface) !important;
    color: var(--tc-muted) !important;
    font-size: var(--tc-fs);
    transition: border-color .15s ease, color .15s ease;
}

.lang-btn:hover {
    border-color: var(--tc-primary) !important;
    color: var(--tc-primary) !important;
    background: var(--tc-primary-soft) !important;
}

.lang-btn.is-active,
.lang-btn.active {
    border-color: var(--tc-primary) !important;
    background: var(--tc-primary) !important;
    color: #fff !important;
}

/* --- Boş durum ---
   Liste sayfalarında "kayıt yok" metni ortalanır ve sakinleşir. */

.main-area .no-record,
.main-area .empty-text {
    padding: 40px 16px;
    text-align: center;
    color: var(--tc-muted);
    font-size: var(--tc-fs);
}

/* --- Metin sayfaları ---
   Hakkımızda, sözleşmeler, politikalar… İçerik yöneticiden serbest HTML
   olarak geliyor; satır uzunluğu okunur bir ölçüde tutulur ve tipografi
   sitenin geri kalanıyla aynı ritmi alır. */

.tc-prose {
    max-width: 72ch;
    color: var(--tc-ink);
    font-size: var(--tc-fs);
    line-height: 1.85;
}

.tc-prose p {
    margin: 0 0 14px;
}

.tc-prose h1,
.tc-prose h2,
.tc-prose h3,
.tc-prose h4 {
    margin: 24px 0 8px;
    font-size: var(--tc-fs-title);
    font-weight: 500;
    color: var(--tc-ink);
}

.tc-prose h1:first-child,
.tc-prose h2:first-child,
.tc-prose h3:first-child {
    margin-top: 0;
}

.tc-prose ul,
.tc-prose ol {
    margin: 0 0 14px;
    padding-left: 20px;
}

.tc-prose li {
    margin-bottom: 5px;
}

.tc-prose a {
    color: var(--tc-primary);
}

.tc-prose strong {
    font-weight: 500;
    color: var(--tc-ink);
}

.tc-prose img {
    max-width: 100%;
    height: auto;
    border-radius: var(--tc-radius);
}

.tc-prose table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 14px;
}

.tc-prose th,
.tc-prose td {
    padding: 8px 12px;
    border: 1px solid var(--tc-line-solid);
    text-align: left;
}

/* =========================================================================
   16) İlan ızgarası, süzgeçler ve paket kullanımı
   =========================================================================
   İlan listesi eskiden yatay karuseldi; aynı anda 3 ilan görünüyordu.
   Izgara düzeni bir pazaryerinin ihtiyaç duyduğu tarama yoğunluğunu verir.
   ========================================================================= */

/* --- Süzgeç çubuğu --- */

.tc-filters {
    margin: 12px 0 16px;
    padding: 12px 14px;
    border: 1px solid var(--tc-line-solid);
    border-radius: var(--tc-radius);
    background: var(--tc-surface);
}

.tc-filters__row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
}

.tc-filters__field {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 130px;
    flex: 1 1 130px;
}

.tc-filters__field label {
    margin: 0;
    font-size: var(--tc-fs-sm);
    color: var(--tc-muted);
}

/* Yükseklik açıkça veriliyor: tarayıcı `select` ile `input`u birkaç piksel
   farklı yüksekliğe getiriyor, satır alttan hizalandığı için etiketler de o
   kadar kayıyordu — "Fiyat aralığı" komşularından yukarıda duruyordu. */
.tc-filters__field select,
.tc-filters__field input {
    width: 100%;
    height: 40px;
    line-height: normal;
}

.tc-filters__actions .thm-btn,
.tc-filters__actions button,
.tc-filters__actions a {
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tc-filters__field--price {
    flex: 1 1 200px;
}

.tc-filters__range {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tc-filters__range span {
    color: var(--tc-muted);
}

.tc-filters__actions {
    display: flex;
    gap: 6px;
    flex: 0 0 auto;
}

.tc-list-count {
    color: var(--tc-muted);
    font-size: var(--tc-fs);
}

/* --- İlan ızgarası --- */

.tc-advert-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 12px;
    margin-top: 4px;
}

.tc-advert {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--tc-line-solid);
    border-radius: var(--tc-radius);
    background: var(--tc-surface);
    overflow: hidden;
    text-decoration: none !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.tc-advert:hover {
    border-color: var(--tc-primary);
    box-shadow: 0 4px 14px var(--tc-line);
}

.tc-advert.is-featured {
    border-color: var(--tc-accent);
}

/* aspect-ratio tek başına yetmez: içerideki görselin doğal boyu kutuyu
   büyütür. Görsel mutlak konumlandırılıp kırpılır. */
.tc-advert__media {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--tc-bg);
}

.tc-advert__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Rozetler birden çok olabilir: firma aynı ilana birkaç tip birden satın
   alabiliyor ve hepsi aynı anda yürürlükte. Kapsayıcı onları alt alta değil
   yan yana dizer, sığmazsa alt satıra taşır. */
.tc-advert__badges {
    position: absolute;
    top: 6px;
    left: 6px;
    right: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    pointer-events: none;
}

.tc-advert__badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--tc-accent);
    color: #fff;
    font-size: 10px;
    line-height: 1.5;
    white-space: nowrap;
}

/* Vitrin lacivert, üst sıra turuncu (varsayılan), acil kırmızı:
   üçü aynı renkte olunca hangisinin ne olduğu ayırt edilmiyordu. */
.tc-advert__badge.is-vitrin { background: var(--tc-primary); }

.tc-advert__body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 9px 11px 11px;
}

.tc-advert__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--tc-ink);
    font-size: var(--tc-fs);
    line-height: 1.45;
    min-height: 2.9em;
}

.tc-advert__price {
    color: var(--tc-accent);
    font-weight: 500;
    font-size: var(--tc-fs);
}

.tc-advert__meta {
    color: var(--tc-muted);
    font-size: var(--tc-fs-sm);
}

.tc-advert-grid__empty {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 48px 16px;
    color: var(--tc-muted);
    text-align: center;
}

/* --- Paket kullanım şeridi --- */

.tc-usage {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    margin: 10px 0 14px;
    padding: 11px 14px;
    border: 1px solid var(--tc-line-solid);
    border-radius: var(--tc-radius);
    background: var(--tc-surface);
}

.tc-usage__item {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.tc-usage__label {
    font-size: var(--tc-fs-sm);
    color: var(--tc-muted);
}

.tc-usage__value {
    font-size: var(--tc-fs-title);
    font-weight: 500;
    color: var(--tc-ink);
}

.tc-usage__note {
    font-size: 10px;
    color: var(--tc-muted);
}

.tc-usage__link {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--tc-primary) !important;
    font-size: var(--tc-fs);
    text-decoration: none !important;
}

/* --- Öne çıkarma düğmesi --- */

.tc-feature-btn {
    padding: 0;
    border: none;
    background: none;
    color: var(--tc-line-solid);
    cursor: pointer;
    vertical-align: middle;
}

.tc-feature-btn:hover {
    color: var(--tc-accent);
}

.tc-feature-btn.is-on {
    color: var(--tc-accent);
}

@media (max-width: 575px) {
    .tc-advert-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
    .tc-filters__actions { width: 100%; }
}

/* --- Temel okunabilirlik ---
   style.css'te temel boyut 12px. Konya'daki 50 yaş üstü işletme sahibi
   dahil "her kesime hitap etsin" hedefiyle çelişiyordu; 13px'e çıkarılır.
   Bileşen ölçüleri de aynı oranda büyür. */

:root {
    --thm-font-size: 13px;
    --tc-fs: 13px;
    --tc-fs-sm: 12px;
    --tc-fs-title: 17px;
}

/* =========================================================================
   17) Gezinme ve okunabilirlik
   =========================================================================
   Panel menüsü düz siyah metindi: tıklanabilir olduğunu gösteren hiçbir
   işaret, bulunduğunuz sayfayı gösteren hiçbir vurgu yoktu ve tıklama alanı
   yazının satır yüksekliği kadardı (~18px). Üçü de burada düzeltilir.
   ========================================================================= */

.accordion-body a {
    gap: 8px;
    justify-content: flex-start !important;
    min-height: 38px;
    padding: 0 10px !important;
    margin: 0 -10px;
    border-radius: var(--tc-radius);
    color: var(--tc-ink) !important;
    transition: background .12s ease, color .12s ease;
}

.accordion-body a:hover {
    background: var(--tc-primary-soft);
    color: var(--tc-primary) !important;
    text-decoration: none !important;
}

.accordion-body a iconify-icon {
    flex: none;
    color: var(--tc-muted);
}

.accordion-body a:hover iconify-icon {
    color: var(--tc-primary);
}

/* Bulunduğunuz sayfa: sol kenarda şerit + dolgu */
.accordion-body a.is-current {
    background: var(--tc-primary-soft);
    color: var(--tc-primary) !important;
    box-shadow: inset 3px 0 0 var(--tc-primary);
}

.accordion-body a.is-current iconify-icon {
    color: var(--tc-primary);
}

/* Sayaç ve notlar satırın sağına yaslanır */
.accordion-body a > span:not(.tc-menu-badge) {
    margin-left: auto;
}

.accordion-body a .tc-menu-badge {
    margin-left: auto;
}

/* Çıkış: sakin bir bağlantı, turuncu dolu düğme değil */
.tc-menu-logout {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--tc-line);
}

.tc-menu-logout button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 38px;
    padding: 0 10px;
    margin: 0 -10px;
    border: none;
    border-radius: var(--tc-radius);
    background: none;
    color: var(--tc-muted);
    font-size: var(--tc-fs);
    cursor: pointer;
}

.tc-menu-logout button:hover {
    background: #fdf3f3;
    color: var(--tc-danger);
}

/* Üst menüde de bulunduğunuz bölüm belli olsun */
.header-top-right a.is-current,
.top-header a.is-current {
    color: var(--tc-primary) !important;
    font-weight: 500;
}

/* =====================================================================
   18. Mağaza istatistikleri
   Paketlerde satılan "istatistik" hakkının ekran karşılığı. Grafik saf
   CSS ile çizilir; panel için ayrı bir kütüphane yüklenmez.
   ===================================================================== */

.tc-stat-periods {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin: 0 0 14px;
}

.tc-stat-period {
    padding: 6px 13px;
    border: 1px solid #e3e3e3;
    border-radius: var(--tc-radius);
    background: #fff;
    color: #444 !important;
    font-size: var(--tc-fs-sm);
    text-decoration: none !important;
    transition: border-color .15s, color .15s;
}

.tc-stat-period:hover { border-color: var(--primary-color); color: var(--primary-color) !important; }

/* Seçili sekme: style.css içindeki a{color:!important} kuralı geçilmeli,
   yoksa mavi zemin üstünde gri yazı kalır ve sekme okunmaz. */
.tc-stat-period.is-current {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff !important;
    font-weight: 500;
}

/* --- Özet kartlar --- */

.tc-stat-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.tc-stat-card {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 13px 14px;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: var(--tc-radius);
}

.tc-stat-card__label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: var(--tc-fs-sm);
    color: #6a6a6a;
}

.tc-stat-card__label iconify-icon { color: var(--primary-color); }

.tc-stat-card__value {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.2;
    color: #1d1d1d;
}

.tc-stat-card__note { font-size: 11px; color: #9a9a9a; }

/* --- Panel --- */

.tc-stat-panel {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: var(--tc-radius);
    padding: 14px 16px 16px;
    margin-bottom: 14px;
}

.tc-stat-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.tc-stat-panel__title {
    margin: 0;
    font-size: var(--tc-fs-title);
    font-weight: 600;
    color: #1d1d1d;
}

.tc-stat-panel__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--tc-fs-sm);
    color: var(--primary-color) !important;
    text-decoration: none !important;
}

.tc-stat-panel__link:hover { text-decoration: underline !important; }

.tc-stat-empty {
    margin: 0;
    font-size: var(--tc-fs-sm);
    color: #777;
    line-height: 1.6;
}

/* --- Grafik --- */

.tc-stat-legend {
    display: flex;
    gap: 12px;
    font-size: 11px;
    color: #777;
}

.tc-stat-legend span { display: inline-flex; align-items: center; gap: 5px; }

.tc-stat-legend__dot {
    width: 9px;
    height: 9px;
    border-radius: 2px;
    display: inline-block;
}

.tc-stat-legend__dot--shop { background: var(--primary-color); }
.tc-stat-legend__dot--advert { background: var(--second-color); }

.tc-stat-chart {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 160px;
    overflow-x: auto;
    padding-bottom: 2px;
}

.tc-stat-chart__col {
    flex: 1 0 14px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
    min-width: 14px;
}

/* Sütun: ilan ve mağaza payları üst üste yığılır */
.tc-stat-chart__bar {
    width: 100%;
    max-width: 22px;
    min-height: 2px;
    display: flex;
    flex-direction: column;
    border-radius: 3px 3px 0 0;
    overflow: hidden;
    background: #f0f0f0;
}

.tc-stat-chart__seg { display: block; min-height: 0; }
.tc-stat-chart__seg--shop { background: var(--primary-color); }
.tc-stat-chart__seg--advert { background: var(--second-color); }

.tc-stat-chart__label {
    margin-top: 5px;
    font-size: 9px;
    color: #a0a0a0;
    white-space: nowrap;
}

/* --- En çok görüntülenenler --- */

.tc-stat-top {
    margin: 0;
    padding: 0 0 0 20px;
    list-style: decimal;
}

.tc-stat-top__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid #f2f2f2;
    font-size: var(--tc-fs);
}

.tc-stat-top__row:last-child { border-bottom: none; }

.tc-stat-top__title {
    color: #1d1d1d;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tc-stat-top__value {
    flex: none;
    font-size: var(--tc-fs-sm);
    color: #777;
}

@media (max-width: 575px) {
    .tc-stat-cards { grid-template-columns: repeat(2, 1fr); }
    .tc-stat-card__value { font-size: 19px; }
    .tc-stat-chart { height: 130px; }
}

/* =====================================================================
   19. Mağaza değerlendirmeleri
   Yorum hakkı gerçek temasa bağlı olduğu için form yalnızca hakkı olana
   çıkar; hakkı olmayana nedeni yazılır.
   ===================================================================== */

.tc-reviews {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #ececec;
}

.tc-reviews__head { margin-bottom: 12px; }

.tc-reviews__note {
    margin: 0 0 14px;
    padding: 11px 13px;
    background: #f7f8fa;
    border: 1px solid #ececec;
    border-radius: var(--tc-radius);
    font-size: var(--tc-fs-sm);
    color: #666;
    line-height: 1.6;
}

/* Yıldızlar */
.tc-star { color: #dcdcdc; }
.tc-star.is-on { color: #f5a623; }

/* --- Puan özeti --- */

.tc-reviews__summary {
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
    align-items: center;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: var(--tc-radius);
    margin-bottom: 16px;
}

.tc-reviews__score {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 110px;
}

.tc-reviews__score strong {
    font-size: 32px;
    font-weight: 600;
    line-height: 1.1;
    color: #1d1d1d;
}

.tc-reviews__stars { display: inline-flex; gap: 1px; }

.tc-reviews__count { font-size: 11px; color: #8a8a8a; }

.tc-reviews__bars {
    flex: 1;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tc-reviews__bar {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: #777;
}

.tc-reviews__bar-label { width: 10px; text-align: right; }

.tc-reviews__bar-track {
    flex: 1;
    height: 6px;
    background: #f0f0f0;
    border-radius: 3px;
    overflow: hidden;
}

.tc-reviews__bar-fill {
    display: block;
    height: 100%;
    background: #f5a623;
}

.tc-reviews__bar-count { width: 22px; }

/* --- Yorum yazma formu --- */

.tc-review-form {
    padding: 15px 16px;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: var(--tc-radius);
    margin-bottom: 16px;
}

.tc-review-form__title {
    margin: 0 0 12px;
    font-size: var(--tc-fs);
    font-weight: 500;
    color: #1d1d1d;
}

.tc-review-form__label {
    display: block;
    margin-bottom: 5px;
    font-size: var(--tc-fs-sm);
    color: #666;
}

.tc-review-form__rating {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.tc-review-form__rating .tc-review-form__label { margin-bottom: 0; }

/* Yıldız seçimi: radio'lar gizli, etiketler ters sırada — böylece
   üzerine gelinen yıldızın solundaki hepsi CSS ile dolabilir. */
.tc-rating-input {
    display: inline-flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
}

.tc-rating-input input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.tc-rating-input label {
    cursor: pointer;
    color: #dcdcdc;
    padding: 0 2px;
    transition: color .12s;
    display: inline-flex !important;
    align-items: center;
}

.tc-rating-input input:checked ~ label,
.tc-rating-input label:hover,
.tc-rating-input label:hover ~ label { color: #f5a623; }

.tc-rating-input input:focus-visible + label {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
    border-radius: 3px;
}

.tc-review-form textarea,
.tc-review__reply-form textarea {
    width: 100%;
    padding: 9px 11px;
    background: #eee;
    border: 1px solid transparent;
    border-radius: var(--tc-radius);
    font-size: var(--tc-fs);
    font-family: inherit;
    resize: vertical;
}

.tc-review-form textarea:focus,
.tc-review__reply-form textarea:focus {
    background: #fff;
    border-color: var(--primary-color);
    outline: none;
}

.tc-review-form__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.tc-review-form__hint { font-size: 11px; color: #9a9a9a; }

/* --- Tek yorum --- */

.tc-review {
    padding: 13px 0;
    border-bottom: 1px solid #f2f2f2;
}

.tc-review:last-child { border-bottom: none; }

.tc-review__head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: 5px;
}

.tc-review__author {
    font-size: var(--tc-fs);
    font-weight: 500;
    color: #1d1d1d;
}

.tc-review__stars { display: inline-flex; gap: 1px; }

.tc-review__date { font-size: 11px; color: #9a9a9a; }

.tc-review__body {
    margin: 0;
    font-size: var(--tc-fs);
    color: #444;
    line-height: 1.65;
    white-space: pre-line;
}

.tc-review__reply {
    margin-top: 9px;
    padding: 10px 12px;
    background: #f7f8fa;
    border-left: 3px solid var(--primary-color);
    border-radius: 0 var(--tc-radius) var(--tc-radius) 0;
}

.tc-review__reply-head {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 4px;
    font-size: 11px;
    font-weight: 500;
    color: var(--primary-color);
}

.tc-review__reply-form {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 9px;
}

.tc-review__reply-form textarea { flex: 1; }

@media (max-width: 575px) {
    .tc-reviews__summary { gap: 14px; }
    .tc-review__reply-form { flex-direction: column; align-items: stretch; }
}

/* Mağaza kartındaki puan rozeti */
.tc-shop-rating {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-top: 4px;
    font-size: var(--tc-fs-sm);
    font-weight: 500;
    color: #444;
}

.tc-shop-rating span { color: #9a9a9a; font-weight: 400; }

/* =====================================================================
   20. Sohbet şikâyeti
   Sohbet iki üyeyi doğrudan buluşturuyor; yöneticiye ulaşan yol her
   sohbette bir tık uzakta durur.
   ===================================================================== */

.tc-report-trigger { margin-left: auto; }
.tc-chat__head-actions + .tc-report-trigger { margin-left: 4px; }

.tc-report {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.tc-report[hidden] { display: none; }

.tc-report__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .45);
}

.tc-report__box {
    position: relative;
    width: 100%;
    max-width: 440px;
    max-height: 90vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 12px;
    padding: 18px 20px 20px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .22);
}

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

.tc-report__title {
    margin: 0;
    font-size: var(--tc-fs-title);
    font-weight: 600;
    color: #1d1d1d;
}

.tc-report__reasons {
    border: none;
    padding: 0;
    margin: 0 0 14px;
}

.tc-report__reasons legend {
    float: none;
    width: auto;
    margin-bottom: 7px;
    padding: 0;
    font-size: var(--tc-fs-sm);
    color: #666;
}

.tc-report__reason {
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding: 8px 11px;
    margin-bottom: 5px;
    border: 1px solid #e6e6e6;
    border-radius: var(--tc-radius);
    font-size: var(--tc-fs);
    color: #333;
    cursor: pointer;
    transition: border-color .12s, background .12s;
}

.tc-report__reason:hover { border-color: var(--primary-color); }

.tc-report__reason input { accent-color: var(--primary-color); margin: 0; }

/* Seçili neden: :has() yerine sınıf — eski tarayıcılarda da çalışsın */
.tc-report__reason.is-selected {
    border-color: var(--primary-color);
    background: #f2f6fc;
}

.tc-report__label {
    display: block;
    margin-bottom: 5px;
    font-size: var(--tc-fs-sm);
    color: #666;
}

.tc-report textarea {
    width: 100%;
    padding: 9px 11px;
    background: #eee;
    border: 1px solid transparent;
    border-radius: var(--tc-radius);
    font-size: var(--tc-fs);
    font-family: inherit;
    resize: vertical;
}

.tc-report textarea:focus {
    background: #fff;
    border-color: var(--primary-color);
    outline: none;
}

.tc-report__hint {
    margin: 10px 0 0;
    font-size: 11px;
    color: #8a8a8a;
    line-height: 1.6;
}

.tc-report__foot {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 14px;
}

body.tc-report-open { overflow: hidden; }

/* =====================================================================
   21. Küçük aralık düzeltmeleri
   Bootstrap kolonları dikeyde boşluk bırakmıyor; üst üste gelen
   bloklar birbirine yapışık duruyordu.
   ===================================================================== */

/* İlan formunda "Geri Dön" ile dil sekmeleri, sekmelerle ilk alan arasında
   nefes payı. Sekme şeridi ayrıca ince bir çizgiyle formdan ayrılır. */
.tc-lang-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 14px 0 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--tc-line-solid);
}

.tc-lang-tabs .lang-btn { margin: 0 !important; }

.thm-back { margin-bottom: 2px; }

/* =====================================================================
   22. İlan öne çıkarma
   Satın alınan görünürlük tipleri hem sihirbazda hem listede aynı
   sınıflarla çizilir; önizleme ile yayın birebir aynı görünür.
   ===================================================================== */

/* --- Liste kartındaki etkiler --- */

/* Üst sıra: sıcak bir kenarlık, kart öne çıksın ama liste bozulmasın */
.tc-advert.is-ustsira {
    border-color: #f3c98b;
    box-shadow: 0 0 0 1px #f3c98b inset;
}

/* Vitrin: en güçlü vurgu */
.tc-advert.is-vitrin {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 1px var(--primary-color) inset;
}

/* Kalın başlık: sıralamayı değiştirmeden dikkat çeker */
.tc-advert.is-kalinbaslik .tc-advert__title {
    font-weight: 600;
    color: var(--primary-color);
}

.tc-advert.is-acil { border-color: #f0b4b4; }

.tc-advert__badge.is-acil { background: #d64545; }

/* --- Paket hakkı şeridi --- */

.tc-promo-quota {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 11px 13px;
    margin-bottom: 14px;
    background: #f7f8fa;
    border: 1px solid #ececec;
    border-radius: var(--tc-radius);
    font-size: var(--tc-fs-sm);
    color: #555;
    line-height: 1.6;
}

.tc-promo-quota.is-open {
    background: #f2f8f4;
    border-color: #cfe6d8;
}

.tc-promo-quota iconify-icon { flex: none; margin-top: 2px; color: var(--primary-color); }

/* --- Adım 1: ilan seçimi --- */

.tc-promo-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 420px;
    overflow-y: auto;
}

.tc-promo-item {
    display: flex !important;
    align-items: center;
    gap: 11px;
    padding: 9px 11px;
    border: 1px solid #e6e6e6;
    border-radius: var(--tc-radius);
    cursor: pointer;
    transition: border-color .12s, background .12s;
}

.tc-promo-item:hover { border-color: var(--primary-color); }

.tc-promo-item.is-selected {
    border-color: var(--primary-color);
    background: #f2f6fc;
}

.tc-promo-item input { flex: none; accent-color: var(--primary-color); margin: 0; }

.tc-promo-item__media {
    flex: none;
    width: 54px;
    height: 42px;
    border-radius: 5px;
    overflow: hidden;
    background: #f2f3f5;
}

.tc-promo-item__media img { width: 100%; height: 100%; object-fit: cover; }

.tc-promo-item__body {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.tc-promo-item__title {
    font-size: var(--tc-fs);
    color: #1d1d1d;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tc-promo-item__meta { font-size: var(--tc-fs-sm); color: var(--second-color); }

.tc-promo-item__active { font-size: 11px; color: #7a8a99; }

/* --- Adım 2: tip seçimi --- */

.tc-promo-types {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 10px;
}

.tc-promo-type {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 13px 14px;
    border: 1px solid #e6e6e6;
    border-radius: var(--tc-radius);
    cursor: pointer;
    transition: border-color .12s, background .12s;
}

.tc-promo-type:hover { border-color: var(--primary-color); }

.tc-promo-type.is-selected {
    border-color: var(--primary-color);
    background: #f2f6fc;
}

.tc-promo-type__head {
    display: flex;
    align-items: center;
    gap: 7px;
}

.tc-promo-type__head input { flex: none; accent-color: var(--primary-color); margin: 0; }
.tc-promo-type__head iconify-icon { color: var(--primary-color); }

.tc-promo-type__name {
    font-size: var(--tc-fs);
    font-weight: 500;
    color: #1d1d1d;
}

.tc-promo-type__price {
    margin-left: auto;
    font-size: var(--tc-fs);
    font-weight: 600;
    color: var(--second-color);
    white-space: nowrap;
}

.tc-promo-type__price small { font-weight: 400; color: #9a9a9a; }

.tc-promo-type__summary { font-size: var(--tc-fs-sm); color: #444; }
.tc-promo-type__desc { font-size: 11px; color: #8a8a8a; line-height: 1.6; }

/* Tipin nerede göründüğünü anlatan küçük şema */
.tc-promo-demo {
    display: block;
    margin-top: 4px;
    padding: 9px 10px;
    background: #fafbfc;
    border: 1px dashed #dcdfe3;
    border-radius: 6px;
}

.tc-promo-demo__label {
    display: block;
    margin-bottom: 6px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #a5adb5;
}

.tc-promo-demo__row { display: flex; gap: 4px; }
.tc-promo-demo__row i { flex: 1; height: 20px; border-radius: 3px; background: #e4e7ea; }

.tc-promo-demo__stack { display: flex; flex-direction: column; gap: 3px; }
.tc-promo-demo__stack i { height: 9px; border-radius: 2px; background: #e4e7ea; }

.tc-promo-demo i.is-on { background: var(--primary-color); }

.tc-promo-demo__text { display: block; font-size: 11px; line-height: 1.7; }
.tc-promo-demo__text b { color: var(--primary-color); }
.tc-promo-demo__text span { color: #a5adb5; }

.tc-promo-demo__badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    background: #d64545;
    color: #fff;
    font-size: 10px;
}

/* --- Adım 3: süre --- */

.tc-promo-days {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.tc-promo-day {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 0;
    min-width: 86px;
    padding: 11px 13px;
    border: 1px solid #e6e6e6;
    border-radius: var(--tc-radius);
    cursor: pointer;
    transition: border-color .12s, background .12s;
}

.tc-promo-day:hover { border-color: var(--primary-color); }

.tc-promo-day.is-selected {
    border-color: var(--primary-color);
    background: #f2f6fc;
}

.tc-promo-day input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.tc-promo-day__num { font-size: 20px; font-weight: 600; color: #1d1d1d; line-height: 1.2; }
.tc-promo-day__unit { font-size: 11px; color: #8a8a8a; }

.tc-promo-day__off {
    margin-top: 4px;
    padding: 1px 6px;
    border-radius: 3px;
    background: #eaf6ef;
    color: #2c7a4b;
    font-size: 10px;
}

.tc-promo-start {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.tc-promo-start label { font-size: var(--tc-fs-sm); color: #666; }

.tc-promo-start input {
    padding: 7px 10px;
    background: #eee;
    border: 1px solid transparent;
    border-radius: var(--tc-radius);
    font-size: var(--tc-fs);
    font-family: inherit;
}

.tc-promo-start input:focus { background: #fff; border-color: var(--primary-color); outline: none; }

.tc-promo-start__hint { font-size: 11px; color: #9a9a9a; }

/* --- Adım 4: önizleme --- */

.tc-promo-preview {
    padding: 14px;
    margin-bottom: 14px;
    background: #fafbfc;
    border: 1px solid #ececec;
    border-radius: var(--tc-radius);
}

.tc-promo-preview__label {
    display: block;
    margin-bottom: 10px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #a5adb5;
}

/* Önizleme kartı gerçek listedeki genişlikte dursun; tam genişlik
   verildiğinde görsel dev görünüyor ve yayındaki hâlle örtüşmüyordu. */
.tc-promo-preview__grid { grid-template-columns: repeat(2, minmax(0, 228px)); }

/* Karşılaştırma kartı: sade dursun, gözü dağıtmasın */
.tc-promo-preview__ghost { opacity: .5; pointer-events: none; }
.tc-promo-preview__ghost .tc-advert__media { background: #eef0f2; }

.tc-promo-note {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 12px 0 0;
    font-size: 11px;
    color: #8a8a8a;
    line-height: 1.6;
}

.tc-promo-note iconify-icon { flex: none; margin-top: 2px; }

.tc-promo-warning {
    margin: 0 0 10px;
    padding: 9px 12px;
    background: #fdf3f3;
    border: 1px solid #f2d4d4;
    border-radius: var(--tc-radius);
    font-size: var(--tc-fs-sm);
    color: #b03a3a;
}

/* --- Geçmiş --- */

.tc-promo-history {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: var(--tc-radius);
    overflow: hidden;
}

.tc-promo-history__row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid #f2f2f2;
    font-size: var(--tc-fs);
}

.tc-promo-history__row:last-child { border-bottom: none; }

.tc-promo-history__type {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 150px;
    color: #1d1d1d;
}

.tc-promo-history__type iconify-icon { color: var(--primary-color); }

.tc-promo-history__dates { color: #777; font-size: var(--tc-fs-sm); }

.tc-promo-history__amount { color: var(--second-color); font-weight: 500; }

.tc-promo-history__status {
    margin-left: auto;
    font-size: var(--tc-fs-sm);
    color: #9a9a9a;
}

.tc-promo-history__status.is-live { color: #2c7a4b; }

@media (max-width: 575px) {
    .tc-promo-preview__grid { grid-template-columns: 1fr; }
    .tc-promo-preview__ghost { display: none; }
    .tc-promo-history__status { margin-left: 0; }
}

/* =====================================================================
   23. İlan bazlı görüntülenme
   Görüntülenme verisi zaten ilan ilan toplanıyordu; burada firmaya
   hangi ilanının çalıştığı, hangisine kimsenin bakmadığı gösterilir.
   ===================================================================== */

.tc-stat-ads {
    display: flex;
    flex-direction: column;
}

.tc-stat-ad {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid #f2f2f2;
}

.tc-stat-ad:last-child { border-bottom: none; }

/* Hiç görüntülenmeyen ilan soluklaşır ama gizlenmez —
   "kimse bakmıyor" bilgisi firmanın işine yarar. */
.tc-stat-ad.is-quiet .tc-stat-ad__media,
.tc-stat-ad.is-quiet .tc-stat-ad__title { opacity: .65; }

.tc-stat-ad__media {
    flex: none;
    width: 50px;
    height: 38px;
    border-radius: 5px;
    overflow: hidden;
    background: #f2f3f5;
}

.tc-stat-ad__media img { width: 100%; height: 100%; object-fit: cover; }

.tc-stat-ad__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tc-stat-ad__title {
    font-size: var(--tc-fs);
    color: #1d1d1d !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tc-stat-ad__title:hover { color: var(--primary-color) !important; }

.tc-stat-ad__promos { display: flex; flex-wrap: wrap; gap: 4px; }

.tc-stat-ad__promo {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 6px;
    border-radius: 3px;
    background: #eef3fb;
    color: var(--primary-color);
    font-size: 10px;
}

.tc-stat-ad__bar {
    height: 5px;
    border-radius: 3px;
    background: #f0f0f0;
    overflow: hidden;
}

.tc-stat-ad__bar span {
    display: block;
    height: 100%;
    background: var(--primary-color);
}

/* Günlük seyir — kıvılcım grafiği */
.tc-stat-ad__spark {
    flex: none;
    display: flex;
    align-items: flex-end;
    gap: 1px;
    width: 110px;
    height: 30px;
}

.tc-stat-ad__spark i {
    flex: 1;
    min-width: 1px;
    border-radius: 1px;
    background: #cfd8e3;
}

.tc-stat-ad__num {
    flex: none;
    width: 96px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
}

.tc-stat-ad__num strong {
    font-size: 16px;
    font-weight: 600;
    color: #1d1d1d;
    line-height: 1.2;
}

.tc-stat-ad__num span { font-size: 10px; color: #9a9a9a; }

.tc-stat-ad__action { flex: none; }

.tc-stat-ads__note {
    margin: 12px 0 0;
    font-size: 11px;
    color: #9a9a9a;
    line-height: 1.6;
}

@media (max-width: 767px) {
    .tc-stat-ad { flex-wrap: wrap; }
    .tc-stat-ad__body { flex-basis: calc(100% - 62px); }
    .tc-stat-ad__spark { display: none; }
    .tc-stat-ad__num { width: auto; align-items: flex-start; }
    .tc-stat-ad__action { margin-left: auto; }
}

/* --- İletişim tıklamaları --- */

.tc-stat-channels {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.tc-stat-channel {
    display: grid;
    grid-template-columns: 150px 56px 1fr 44px;
    align-items: center;
    gap: 10px;
}

.tc-stat-channel.is-quiet { opacity: .5; }

.tc-stat-channel__head {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--tc-fs);
    color: #444;
}

.tc-stat-channel__head iconify-icon { color: var(--primary-color); }

.tc-stat-channel__num {
    font-size: 15px;
    font-weight: 600;
    color: #1d1d1d;
    text-align: right;
}

.tc-stat-channel__bar {
    height: 6px;
    border-radius: 3px;
    background: #f0f0f0;
    overflow: hidden;
}

.tc-stat-channel__bar span {
    display: block;
    height: 100%;
    background: var(--primary-color);
}

.tc-stat-channel__pay { font-size: 11px; color: #9a9a9a; }

.tc-stat-sources {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #f2f2f2;
    font-size: var(--tc-fs-sm);
    color: #777;
}

.tc-stat-sources strong { color: #1d1d1d; }

@media (max-width: 767px) {
    .tc-stat-channel { grid-template-columns: 1fr 50px; }
    .tc-stat-channel__bar, .tc-stat-channel__pay { display: none; }
}

/* =====================================================================
   24. Telefon gezinmesi
   ---------------------------------------------------------------------
   Üst menüdeki bağlantılar mobilde gizleniyordu; telefondan gelen
   ziyaretçinin mağazalara, haritaya ya da paketlere ulaşmasının hiçbir
   yolu yoktu. Alt çubuk o boşluğu kapatır.
   ===================================================================== */

.tc-mnav { display: none; }
.tc-msheet { display: none; }

@media (max-width: 991px) {

    .tc-mnav {
        position: fixed;
        inset: auto 0 0 0;
        z-index: 1040;
        display: flex;
        align-items: stretch;
        background: rgba(255, 255, 255, .96);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-top: 1px solid #e6eaef;
        /* iPhone'un alt çubuğu düğmeleri örtmesin */
        padding-bottom: env(safe-area-inset-bottom, 0);
    }

    .tc-mnav__item {
        position: relative;
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        /* 52px dokunma hedefi: parmak için alt sınır */
        min-height: 52px;
        padding: 7px 2px;
        border: none;
        background: none;
        color: #8a94a0 !important;
        font-family: inherit;
        font-size: 10px;
        text-decoration: none !important;
        cursor: pointer;
    }

    .tc-mnav__item span {
        line-height: 1.2;
        white-space: nowrap;
    }

    .tc-mnav__item.is-current { color: var(--primary-color) !important; }

    /* Seçili öğe üstten ince bir çizgiyle işaretlenir */
    .tc-mnav__item.is-current::before {
        content: '';
        position: absolute;
        top: 0;
        left: 22%;
        right: 22%;
        height: 2px;
        border-radius: 0 0 2px 2px;
        background: var(--primary-color);
    }

    .tc-mnav__dot {
        position: absolute;
        top: 8px;
        right: 50%;
        transform: translateX(14px);
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #d64545;
    }

    /* Çubuk içeriği örtmesin */
    body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }

    /* --- Menü sayfası --- */

    .tc-msheet {
        position: fixed;
        inset: 0;
        z-index: 1050;
        display: block;
    }

    .tc-msheet[hidden] { display: none; }

    .tc-msheet__backdrop {
        position: absolute;
        inset: 0;
        background: rgba(16, 26, 43, .45);
    }

    .tc-msheet__panel {
        position: absolute;
        inset: auto 0 0 0;
        max-height: 82vh;
        overflow-y: auto;
        background: #fff;
        border-radius: 16px 16px 0 0;
        padding: 8px 0 calc(14px + env(safe-area-inset-bottom, 0px));
        box-shadow: 0 -8px 32px rgba(16, 26, 43, .2);
        animation: tc-msheet-in .18s ease-out;
    }

    @keyframes tc-msheet-in {
        from { transform: translateY(14px); opacity: .6; }
        to   { transform: none; opacity: 1; }
    }

    @media (prefers-reduced-motion: reduce) {
        .tc-msheet__panel { animation: none; }
    }

    /* Yukarıdaki tutamak: bunun kaydırılabilir bir sayfa olduğunu söyler */
    .tc-msheet__grip {
        width: 36px;
        height: 4px;
        margin: 4px auto 10px;
        border-radius: 2px;
        background: #dfe3e8;
    }

    .tc-msheet__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 18px 10px;
        border-bottom: 1px solid #f0f2f5;
    }

    .tc-msheet__title {
        font-size: 15px;
        font-weight: 600;
        color: #16202e;
    }

    .tc-msheet__close {
        display: grid;
        place-items: center;
        width: 32px;
        height: 32px;
        border: 1px solid #e6eaef;
        border-radius: 8px;
        background: #fff;
        color: #5b6878;
        cursor: pointer;
    }

    .tc-msheet__body { padding: 6px 10px 4px; }

    .tc-msheet__link {
        display: flex !important;
        align-items: center;
        gap: 11px;
        width: 100%;
        min-height: 48px;
        padding: 0 12px;
        border: none;
        border-radius: 9px;
        background: none;
        color: #16202e !important;
        font-family: inherit;
        font-size: 14px;
        text-align: left;
        text-decoration: none !important;
        cursor: pointer;
    }

    .tc-msheet__link:active { background: #f2f5f9; }

    .tc-msheet__link iconify-icon { flex: none; color: var(--primary-color); }

    .tc-msheet__link--quiet { color: #5b6878 !important; }
    .tc-msheet__link--quiet iconify-icon { color: #8a94a0; }

    .tc-msheet__badge {
        margin-left: auto;
        min-width: 20px;
        padding: 1px 6px;
        border-radius: 20px;
        background: #d64545;
        color: #fff;
        font-size: 11px;
        font-weight: 600;
        text-align: center;
    }

    .tc-msheet__sep {
        height: 1px;
        margin: 6px 12px;
        background: #f0f2f5;
    }

    .tc-msheet__form { margin: 0; }

    body.tc-msheet-open { overflow: hidden; }
}

/* =====================================================================
   25. Telefonda kolon sırası
   ---------------------------------------------------------------------
   Masaüstünde sektör menüsü ve reklam sol kolonda durur. Bootstrap bu
   kolonu telefonda içeriğin ÜSTÜNE yığıyor; ziyaretçi ilanlara ulaşmak
   için menüyü ve reklamı geçmek zorunda kalıyordu.

   Yalnızca liste sayfalarında (.tc-aside işaretli kolonlarda) sıra
   değiştirilir — üye panelindeki sol menü yerinde kalır, çünkü orada
   menü ziyaretçinin aradığı şeyin kendisidir.
   ===================================================================== */

@media (max-width: 991px) {
    .tc-aside { order: 2; margin-top: 18px; }
    .tc-aside ~ [class*='col-lg-'] { order: 1; }

    /* Sektör kutusu, kolon aşağı indiğinde de erişilebilir kalsın diye
       kapalı başlar; başlığı tam genişlikte bir dokunma hedefidir. */
    .tc-aside .accordion-button { min-height: 48px; }
}

/* =====================================================================
   26. Telefonda başlık
   ---------------------------------------------------------------------
   Logo + arama + üst bant reklamı birlikte 330px yer kaplıyordu; ilk
   içerik ekranın altında kalıyordu. Üst bant ücretli bir alan olduğu
   için gizlenmez, sıkıştırılır.
   ===================================================================== */

@media (max-width: 991px) {
    .head-content {
        padding-top: 6px;
        padding-bottom: 6px;
        margin-bottom: 0;
    }

    .head-content img.brand-logo,
    .head-content > a > img { max-height: 42px; width: auto; }

    /* Üst bant: oranı korunur, yüksekliği sınırlanır */
    .header-top-promo {
        max-height: 54px;
        width: auto;
        margin: 0 auto;
        display: block;
    }

    .header-box { padding-bottom: 8px; }

    /* Üst menü satırı: yalnızca hesap bağlantıları kalıyor, sıkışsın */
    .top-header { padding: 4px 0; }
    .top-header a, .top-header button { font-size: 12px; }

    /* Arama kutusu tam genişlik ve rahat dokunulur */
    .head-content form { margin: 0; }
    .head-content input[type='search'],
    .head-content input[type='text'] { min-height: 44px; }
}

/* =====================================================================
   27 · Mesaj işlemleri — düzenleme, silme, tepki
   ---------------------------------------------------------------------
   Balonun kenarında beliren üç nokta yalnızca üzerine gelince görünür:
   her mesajın yanında duran bir düğme, sohbeti düğme tarlasına çeviriyordu.
   Dokunmatik cihazlarda "üzerine gelme" olmadığı için orada hep görünür.
   ===================================================================== */

.tc-msg {
    position: relative;
}

/*
   Düğme balonun yanında ama mesajın KENDİ kutusunun İÇİNDE duruyor.
   Önce kutunun dışına (-32px) konmuştu; görünürlüğü kutunun `:hover`ına
   bağlı olduğu için fare düğmeye doğru gidince kutudan çıkıyor, düğme
   kayboluyor ve tıklanamıyordu. Mesaja o yandan boşluk verilip düğme o
   boşluğa yerleştirildi: fare bütün yol boyunca mesajın üstünde kalıyor.
*/
.tc-msg {
    --tc-msg-more: 34px;
}

.tc-msg--mine { padding-left: var(--tc-msg-more); }
.tc-msg:not(.tc-msg--mine) { padding-right: var(--tc-msg-more); }

.tc-msg__more {
    position: absolute;
    top: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid var(--tc-line);
    border-radius: 50%;
    background: #fff;
    color: #7c8794;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(16, 24, 40, .10);

    /* Gizliyken yer kaplamaya devam eder: `display:none` ile açılıp
       kapandığında balon yerinden oynuyordu. */
    opacity: 0;
    visibility: hidden;
    transition: opacity .12s ease;
}

.tc-msg__more:hover {
    color: var(--tc-primary);
    border-color: var(--tc-primary);
}

.tc-msg--mine .tc-msg__more { left: 0; }
.tc-msg:not(.tc-msg--mine) .tc-msg__more { right: 0; }

.tc-msg:hover .tc-msg__more,
.tc-msg:focus-within .tc-msg__more,
.tc-msg.is-menu-open .tc-msg__more {
    opacity: 1;
    visibility: visible;
}

/* Menü açıkken düğme lacivert kalsın: hangi mesajın menüsü olduğu belli olsun */
.tc-msg.is-menu-open .tc-msg__more {
    color: var(--tc-primary);
    border-color: var(--tc-primary);
}

/* Dokunmatikte "üzerine gelme" yok; düğme hep görünür */
@media (hover: none) {
    .tc-msg__more {
        opacity: 1;
        visibility: visible;
    }
}

/* --- Düzenlendi etiketi ve silinmiş mesaj --- */

.tc-msg__edited {
    font-style: italic;
    opacity: .75;
}

.tc-msg__bubble--deleted {
    display: flex;
    align-items: center;
    gap: 6px;
    width: fit-content;

    /* Balonun `pre-wrap`ı burada geçerli değil: bu balonun içeriği kullanıcı
       metni değil, şablondaki girintiden gelen boşlukları da gerçek boşluk
       sayıp kutuyu iki katına çıkarıyordu. */
    white-space: normal;
    font-style: italic;
    color: #8a94a0 !important;
    background: #f4f5f9 !important;
    border-color: var(--tc-line) !important;
}

.tc-msg--mine .tc-msg__bubble--deleted {
    margin-left: auto;
}

/* --- Tepkiler --- */

.tc-msg__reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.tc-msg--mine .tc-msg__reactions {
    justify-content: flex-end;
}

.tc-reaction {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border: 1px solid var(--tc-line);
    border-radius: 999px;
    background: #fff;
    font-size: 12px;
    line-height: 1.5;
    cursor: pointer;
}

.tc-reaction span {
    font-size: 11px;
    font-weight: 600;
    color: #5a6675;
}

/* Kendi tepkim: dolgu rengiyle işaretli, sayı da lacivert */
.tc-reaction.is-mine {
    border-color: var(--tc-primary);
    background: #eaf0fa;
}

.tc-reaction.is-mine span {
    color: var(--tc-primary);
}

/* --- İşlem menüsü --- */

/* Belgeye bağlı: sohbet gövdesinin taşma sınırı menüyü kırpıyordu */
.tc-msgmenu {
    position: fixed;
    z-index: 1200;
    min-width: 172px;
    padding: 6px;
    border: 1px solid var(--tc-line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(16, 24, 40, .14);
}

.tc-msgmenu__emojis {
    display: flex;
    gap: 2px;
    padding: 2px 2px 6px;
    border-bottom: 1px solid var(--tc-line);
    margin-bottom: 4px;
}

.tc-msgmenu__emojis button {
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    transition: transform .12s ease, background-color .12s ease;
}

.tc-msgmenu__emojis button:hover {
    background: #f4f5f9;
    transform: scale(1.18);
}

.tc-msgmenu__item {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    font-size: 13.5px;
    color: var(--tc-ink);
    text-align: left;
    cursor: pointer;
}

.tc-msgmenu__item:hover {
    background: #f4f5f9;
}

.tc-msgmenu__item--danger {
    color: #c62f2f;
}

/* --- Yerinde düzenleme --- */

.tc-msg__bubble.is-editing {
    padding: 8px;
    min-width: 240px;
    background: #fff !important;
    border-color: var(--tc-primary) !important;
}

.tc-msgedit__input {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--tc-line);
    border-radius: 9px;
    font: inherit;
    font-size: 13.5px;
    color: var(--tc-ink);
    resize: vertical;
}

.tc-msgedit__actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 6px;
}

.tc-msgedit__actions button {
    padding: 5px 12px;
    border: 1px solid var(--tc-line);
    border-radius: 8px;
    background: #fff;
    font-size: 12.5px;
    color: var(--tc-ink);
    cursor: pointer;
}

.tc-msgedit__actions button.is-primary {
    border-color: var(--tc-primary);
    background: var(--tc-primary);
    color: #fff;
}

/* Dar ekranda menü ve düğme balonun dışına sığmıyor: içeri alınır */
@media (max-width: 575.98px) {
    .tc-msg--mine .tc-msg__more { left: auto; right: 2px; top: -10px; }
    .tc-msg:not(.tc-msg--mine) .tc-msg__more { right: auto; left: 2px; top: -10px; }

}

/* --- Emoji seçici --- */

.tc-chat__composer {
    position: relative;
}

.tc-emojipanel {
    position: absolute;
    left: 0;
    bottom: calc(100% + 8px);
    z-index: 40;
    width: min(300px, calc(100vw - 32px));
    max-height: 260px;
    overflow-y: auto;
    padding: 10px 12px 12px;
    border: 1px solid var(--tc-line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(16, 24, 40, .14);
}

.tc-emojipanel__title {
    margin: 8px 0 4px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #8a94a0;
}

.tc-emojipanel__title:first-child {
    margin-top: 0;
}

.tc-emojipanel__grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 2px;
}

.tc-emojipanel__grid button {
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 9px;
    background: transparent;
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
    transition: background-color .12s ease, transform .12s ease;
}

.tc-emojipanel__grid button:hover {
    background: #f4f5f9;
    transform: scale(1.15);
}


/* =====================================================================
   28 · Ana sayfa ilan şeridi
   ---------------------------------------------------------------------
   Şerit artık ilan listesiyle aynı `.tc-advert` kartını kullanıyor; kendi
   `.product-box` biçimi kaldırıldı. Burada yalnızca kartın kaydırma
   şeridine oturması var: swiper dilimi kartı yüksekliğe yaymalı ki aynı
   satırdaki kartların altı hizalansın.
   ===================================================================== */

.main-products .swiper-slide {
    height: auto;
}

.main-products .swiper-slide .tc-advert {
    height: 100%;
}

/* --- Öne çıkarmalarım: ilana göre gruplama ---
   Satırlarda yalnızca tip ve tarih varken hangi ilanın öne çıkarıldığı
   okunamıyordu; her grup başlığında ilan adı ve kaç tipin aktif olduğu var. */

.tc-promo-group {
    margin-bottom: 12px;
    border: 1px solid #ececec;
    border-radius: var(--tc-radius);
    overflow: hidden;
}

.tc-promo-group__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #f7f8fa;
    border-bottom: 1px solid #ececec;
}

.tc-promo-group__title {
    font-weight: 600;
    font-size: var(--tc-fs);
    color: var(--tc-ink) !important;
    text-decoration: none;
}

.tc-promo-group__title:hover {
    color: var(--tc-primary) !important;
}

.tc-promo-group__live {
    padding: 1px 8px;
    border-radius: 999px;
    background: #e8f4ec;
    color: #1b7f4b;
    font-size: 11px;
    font-weight: 600;
}

/* --- Uzatma onayı ---
   Aynı ilana aynı tip yeniden alındığında dönem üstüne yazılmaz, arkasına
   eklenir. Kullanıcı ne ödeyeceğini ve yeni bitişi görmeden onaylamamalı. */

.tc-promo-extend {
    padding: 14px 16px;
    margin-bottom: 16px;
    border: 1px solid #ffd9a8;
    border-left: 3px solid #e87611;
    border-radius: var(--tc-radius);
    background: #fffaf3;
}

.tc-promo-extend__head {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #a5540a;
    font-size: var(--tc-fs);
}

.tc-promo-extend__lead {
    margin: 8px 0 12px;
    font-size: var(--tc-fs-sm);
    color: #6b5842;
    line-height: 1.65;
}

.tc-promo-extend__table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--tc-fs-sm);
    background: #fff;
    border: 1px solid #f0e2cf;
    border-radius: var(--tc-radius);
    overflow: hidden;
}

.tc-promo-extend__table th,
.tc-promo-extend__table td {
    padding: 7px 11px;
    text-align: left;
    border-bottom: 1px solid #f4ece0;
}

.tc-promo-extend__table th {
    font-weight: 600;
    font-size: 11.5px;
    color: #8a7a66;
    background: #fdf7ef;
}

.tc-promo-extend__table tr:last-child td {
    border-bottom: 0;
}

/* Uzatılan satır işaretli: hangisinin ekleme olduğu belli olsun */
.tc-promo-extend__table tr.is-extend td {
    font-weight: 600;
    color: #a5540a;
}

.tc-promo-extend__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

/* =====================================================================
   29 · Bildirim ve onay pencereleri
   ---------------------------------------------------------------------
   SweetAlert2'nin yerini alır. Kütüphane kendi tipografisini ve düğme
   biçimini dayatıyordu; sayfaların bir kısmı `customClass` ile yamanmış,
   bir kısmı yamanmamıştı — aynı sitede iki ayrı görünüm çıkıyordu.
   ===================================================================== */

.tc-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.tc-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(16, 24, 40, .45);
    animation: tc-modal-fade .16s ease;
}

.tc-modal__panel {
    position: relative;
    width: 100%;
    max-width: 384px;
    padding: 26px 24px 20px;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 20px 48px rgba(16, 24, 40, .22);
    text-align: center;
    animation: tc-modal-in .18s cubic-bezier(.2, .8, .3, 1);
}

.tc-modal.is-kapaniyor .tc-modal__panel,
.tc-modal.is-kapaniyor .tc-modal__backdrop {
    animation: tc-modal-out .12s ease forwards;
}

@keyframes tc-modal-fade {
    from { opacity: 0 }
    to   { opacity: 1 }
}

@keyframes tc-modal-in {
    from { opacity: 0; transform: translateY(10px) scale(.97) }
    to   { opacity: 1; transform: none }
}

@keyframes tc-modal-out {
    to { opacity: 0 }
}

/* Hareketi azaltma tercihi: pencere yine açılır, sadece kaymaz */
@media (prefers-reduced-motion: reduce) {
    .tc-modal__panel,
    .tc-modal__backdrop,
    .tc-modal.is-kapaniyor .tc-modal__panel,
    .tc-modal.is-kapaniyor .tc-modal__backdrop {
        animation: none;
    }
}

/* Arkadaki sayfa kaymasın */
body.tc-modal-acik {
    overflow: hidden;
}

/* --- Simge ---
   Renk tek başına bırakılmadı: her tür kendi simgesini de taşıyor. */

.tc-modal__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin-bottom: 15px;
    border-radius: 50%;
}

.tc-modal__icon.is-bilgi  { background: #eaf0fa; color: #154f9e; }
.tc-modal__icon.is-basari { background: #eaf6ee; color: #1b7f4b; }
.tc-modal__icon.is-hata   { background: #fcedee; color: #c62f2f; }
.tc-modal__icon.is-uyari  { background: #fdf1e4; color: #b45c09; }

.tc-modal__title {
    margin: 0 0 6px;
    font-size: 17.5px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--tc-ink);
}

.tc-modal__text {
    margin: 0;
    font-size: var(--tc-fs-sm);
    line-height: 1.65;
    color: #5a6675;
}

/* --- Düğmeler ---
   Alt alta: yan yana dizilince uzun Türkçe etiketler ("Tüm cihazlardan
   çıkış yap") kırpılıyordu. Onay üstte, çünkü başparmak oraya daha kolay
   uzanıyor; vazgeç sessiz ve altta. */

.tc-modal__actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 22px;
}

.tc-modal__btn {
    display: block;
    width: 100%;
    padding: 12px 16px;
    border: 1px solid transparent;
    border-radius: 12px;
    font-family: inherit;
    font-size: var(--tc-fs);
    font-weight: 500;
    line-height: 1.4;
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease;
}

.tc-modal__btn--primary {
    background: var(--tc-primary);
    color: #fff;
}

.tc-modal__btn--primary:hover {
    background: #0f3c79;
}

/* Yıkıcı işlem: onay düğmesi kırmızı — geri alınamayacağı renkten okunsun */
.tc-modal__panel.is-yikici .tc-modal__btn--primary {
    background: #c62f2f;
}

.tc-modal__panel.is-yikici .tc-modal__btn--primary:hover {
    background: #a92727;
}

.tc-modal__btn--ghost {
    background: #fff;
    border-color: var(--tc-line);
    color: #5a6675;
}

.tc-modal__btn--ghost:hover {
    background: #f4f5f9;
}

.tc-modal__btn:focus-visible {
    outline: 2px solid var(--tc-primary);
    outline-offset: 2px;
}

.tc-modal__panel.is-yikici .tc-modal__btn--primary:focus-visible {
    outline-color: #c62f2f;
}

/* =====================================================================
   30 · Hesap silme
   ---------------------------------------------------------------------
   Profilin en altında, güncelleme formundan ayrı bir kutuda. Aynı alanda
   dursaydı yanlışlıkla basılması kolay olurdu. Kırmızı çerçeve ve uyarı
   simgesi, işlemin geri alınamayacağını renkten okutuyor.
   ===================================================================== */

.tc-hesap-sil {
    margin-top: 34px;
    padding: 18px 20px 20px;
    border: 1px solid #f0cccc;
    border-left: 3px solid #c62f2f;
    border-radius: var(--tc-radius);
    background: #fffafa;
}

.tc-hesap-sil__baslik {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    font-size: var(--tc-fs);
    font-weight: 600;
    color: #a52323;
}

.tc-hesap-sil__metin {
    margin: 0 0 16px;
    font-size: var(--tc-fs-sm);
    line-height: 1.7;
    color: #6b5555;
}

.tc-hesap-sil__form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
}

.tc-hesap-sil__alan {
    flex: 1 1 220px;
}

.tc-hesap-sil__alan label {
    display: block;
    margin-bottom: 5px;
    font-size: 12px;
    font-weight: 600;
    color: #6b5555;
}

.tc-hesap-sil__alan label span {
    font-weight: 400;
    opacity: .7;
}

.tc-hesap-sil__alan input {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid #eddada;
    border-radius: 12px;
    background: #fff;
    font: inherit;
    font-size: var(--tc-fs-sm);
    color: var(--tc-ink);
}

.tc-hesap-sil__alan input:focus {
    outline: none;
    border-color: #c62f2f;
    box-shadow: 0 0 0 3px rgba(198, 47, 47, .12);
}

.tc-hesap-sil__dugme {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 11px 18px;
    border: 0;
    border-radius: 12px;
    background: #c62f2f;
    color: #fff;
    font: inherit;
    font-size: var(--tc-fs-sm);
    font-weight: 500;
    cursor: pointer;
    transition: background-color .12s ease;
}

.tc-hesap-sil__dugme:hover {
    background: #a92727;
}

@media (max-width: 575.98px) {
    .tc-hesap-sil__dugme {
        width: 100%;
        justify-content: center;
    }
}

/* ---------------------------------------------------------------------------
   31 · Taşan metin — kısaltma ve ipucu

   Uzun e-posta adresleri firma kutusunda ikinci satıra taşıp kartın
   dengesini bozuyordu. Metin artık tek satırda kalıp "..." ile kesiliyor;
   tamamı üzerine gelindiğinde altta açılan bir ipucunda görünüyor.

   Dokunmatik cihazlarda "üzerine gelme" diye bir şey yok; ipucu orada
   gizleniyor, metin de kesilse bile bağlantı çalışmaya devam ediyor.
   --------------------------------------------------------------------------- */

.tc-kisalt {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Esnek kutuda kısaltma, ancak çocuk küçülebiliyorsa çalışır */
.profile-link {
    min-width: 0;
    max-width: 100%;
}

.profile-link > iconify-icon {
    flex: 0 0 auto;
}

.profile-link .tc-kisalt {
    flex: 0 1 auto;
    margin-left: 4px;
}

.tc-ipucu {
    position: relative;
}

.tc-ipucu::after {
    content: attr(data-tc-tam);
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 30;
    max-width: min(88vw, 320px);
    padding: 6px 10px;
    border-radius: 8px;
    background: #0f172a;
    color: #fff;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.45;
    white-space: normal;
    word-break: break-all;
    box-shadow: 0 6px 20px rgba(15, 23, 42, .22);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-3px);
    transition: opacity .14s ease, transform .14s ease, visibility .14s;
    pointer-events: none;
}

.tc-ipucu:hover::after,
.tc-ipucu:focus-visible::after {
    opacity: 1;
    visibility: visible;
    transform: none;
}

@media (hover: none) {
    .tc-ipucu::after {
        display: none;
    }
}

/* ---------------------------------------------------------------------------
   32 · Mağaza ızgarası — eşit yükseklik

   Kartlar serbest akıyordu: firma adı bir ya da iki satır, uzun e-posta
   sarıyor, WhatsApp kimi kartta yok. Aynı bilgi her kartta farklı yükseklikte
   duruyor, ızgara tırtıklı görünüyordu.

   Çözüm ölçü değil yapı: kart sabit bölgelere ayrıldı. Değişken olan tek
   bölge iletişim listesi; o da esneyip alt eylemi kartın dibinde tutuyor.
   Böylece kaç bilgi olursa olsun kartların üst ve alt hizası aynı kalıyor.
   --------------------------------------------------------------------------- */

.tc-shopgrid__col {
    display: flex;
    margin-bottom: 24px;
}

/* Kart sütunu boydan boya doldurur — Bootstrap sütunları eşit yükseklikte
   uzar ama içindeki kutu uzamıyordu, kartlar havada kalıyordu. */
.tc-shopcard {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 22px 18px;
    border-radius: 14px;
    text-align: center;
}

.tc-shopcard__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 150px;
    margin-bottom: 14px;
}

.tc-shopcard__logo .brand-logo {
    width: 132px;
    height: 132px;
    margin: 0;
}

/* Ad iki satıra kadar yer ayırır: tek satırlık adlarla iki satırlıklar
   arasında altındaki her şey kayıyordu. */
.tc-shopcard__name {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
}

.tc-shopcard__name .thm-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
    font-size: 15px;
    line-height: 1.35;
}

.tc-shopcard__name .member-perm {
    vertical-align: middle;
    margin-left: 6px;
}

/* Puan satırı boş da olsa yerini korur */
.tc-shopcard__rating {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    margin-bottom: 10px;
}

.tc-shopcard__norating {
    font-size: 11.5px;
    color: #b4b4b4;
}

.tc-shopcard__tools {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--shadow-color, #eee);
    width: 100%;
}

.tc-shopcard__tools iconify-icon { margin-right: 0; }

/* Değişken bölge: kaç iletişim satırı olursa olsun alt eylemi dibe iter */
.tc-shopcard__lines {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    width: 100%;
    flex: 1 1 auto;
}

.tc-shopcard__lines .profile-link,
.tc-shopcard__lines .profile-wp-link {
    max-width: 100%;
    min-width: 0;
}

.tc-shopcard__foot {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--shadow-color, #eee);
}

/* Telefonda tek sütuna düşünce kart yüksekliğini sabitlemenin anlamı yok */
@media (max-width: 575.98px) {
    .tc-shopcard__logo { height: 120px; }
    .tc-shopcard__logo .brand-logo { width: 104px; height: 104px; }
    .tc-shopcard__name { min-height: 0; }
}

/* İkon yuvarlakları `.shop-profile-box iconify-icon` kuralına bağlıydı; kart
   yeni bölge sınıflarına geçince ikonlar çıplak kaldı. Aynı görünüm yeni
   bölgelerde yeniden tanımlanıyor. */
.tc-shopcard__tools iconify-icon,
.tc-shopcard__lines iconify-icon,
.tc-shopcard__foot iconify-icon {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--shadow-color, #f1f1f1);
    border: 1px solid var(--shadow-color, #f1f1f1);
    color: var(--text-color, #333);
    transition: all .3s ease;
}

.tc-shopcard__lines iconify-icon,
.tc-shopcard__foot iconify-icon { margin-right: 8px; }

.tc-shopcard__tools a:hover iconify-icon,
.tc-shopcard__lines a:hover iconify-icon,
.tc-shopcard__foot a:hover iconify-icon {
    background: var(--primary-color, #18509e);
    border-color: var(--primary-color, #18509e);
    color: #fff;
}

.tc-shopcard__tools { gap: 6px; }

.tc-shopcard .favorite-active iconify-icon {
    background: #d33;
    border-color: #d33;
    color: #fff;
}

/* Dar kolon (yan menü vitrini): en az 190px'lik ızgara burada tek sütuna
   düşüp kartları gereksiz büyütüyordu. */
.tc-advert-grid--dar {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}

/* Eski `.product-box` kartında bağlantıya genişlik verilmemişti: içindeki
   `width:100%` görsel, bağlantının genişliğini kendi doğal boyutundan
   türetiyor ve kart kenarlarından taşıyordu. */
.product-box > a {
    display: block;
    width: 100%;
    min-width: 0;
}

/* ---------------------------------------------------------------------------
   33 · İlan galerisi

   Büyük görsel sabit en-boy oranında bir kutuda durur; içine `contain` ile
   yerleşir, böylece dikey de yatay da fotoğraf kırpılmadan tam görünür ve
   kutu her ilanda aynı yüksekliktedir.

   Küçük resimler altta yatay bir şerit. Önceki düzende sağda dikey bir
   Swiper vardı: sabit 438px yüksekliği tek görselli ilanlarda boş bir sütun
   bırakıyor, tek kare de büyük görselle hizasız duruyordu.
   --------------------------------------------------------------------------- */

.tc-gallery {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tc-gallery__main {
    display: block;
    position: relative;
    aspect-ratio: 4 / 3;
    border: 1px solid var(--tc-line-solid, #e6e6e6);
    border-radius: var(--tc-radius, 10px);
    background: var(--tc-bg, #fafafa);
    overflow: hidden;
}

.tc-gallery__main img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Şerit taşarsa yatay kayar; alt alta yığılıp sayfayı uzatmaz */
.tc-gallery__thumbs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
}

.tc-gallery__thumbs .advert-thumbnail {
    flex: 0 0 auto;
    width: 78px;
    height: 62px;
    border-radius: 8px;
    border: 1px solid var(--tc-line-solid, #e6e6e6);
    object-fit: cover;
    cursor: pointer;
    opacity: .75;
    transition: opacity .15s ease, border-color .15s ease;
}

.tc-gallery__thumbs .advert-thumbnail:hover { opacity: 1; }

.tc-gallery__thumbs .advert-thumbnail.is-current {
    opacity: 1;
    border-color: var(--tc-primary, #18509e);
    box-shadow: 0 0 0 2px rgba(24, 80, 158, .18);
}

/* ---------------------------------------------------------------------------
   34 · İlan yönetimi satırı

   Satır yüksekliğini görsel belirliyordu: `.product-box img` kuralı 180px
   yükseklik + `contain` veriyor, dar bir sütunda görsel hem dev duruyor hem
   de kutunun içinde yüzüyordu. Başlık iki satıra çıkınca da başlık, fiyat,
   tarih ve eylemler birbirinden kayıyordu.

   Küçük görsel artık sabit oranlı bir kutu; sütunlar dikey ortalanıyor.
   --------------------------------------------------------------------------- */

.profile-product .product-box {
    align-items: center;
    row-gap: 10px;
}

.profile-product .product-box > [class*="col-"] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.profile-product .product-box img {
    width: 100%;
    max-width: 150px;
    height: auto;
    aspect-ratio: 4 / 3;
    max-height: none;
    object-fit: cover;
    border-radius: 8px;
}

/* Başlık iki satırda sabit kalsın; satır yüksekliği metinle oynamasın */
.profile-product .product-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-align: center;
}

.profile-product .product-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* ---------------------------------------------------------------------------
   35 · İstatistik kutuları — eşit yapı

   Kutular serbest akıyordu: iki satıra çıkan bir etiket ("Mağaza
   görüntülenme") o kutunun sayısını komşularından aşağı itiyor, iki satırlık
   bir alt not da kutuyu uzatıyordu. Aynı ızgarada yedi kutu, yedi ayrı
   yükseklikte duruyordu.

   Etikete iki satır, nota iki satır yer ayrılıyor; sayı ikisinin arasında
   sabit bir yerde kalıyor.
   --------------------------------------------------------------------------- */

.tc-stat-card {
    justify-content: flex-start;
    height: 100%;
}

.tc-stat-card__label {
    align-items: flex-start;
    min-height: 2.7em;
    line-height: 1.35;
}

.tc-stat-card__label iconify-icon {
    flex: 0 0 auto;
    margin-top: 2px;
}

.tc-stat-card__value {
    margin-top: auto;
}

.tc-stat-card__note {
    min-height: 2.6em;
    line-height: 1.3;
}

/* Reklam alanı kartları: nerede göründüğü açıklaması bir ya da iki satır
   olabiliyor, ölçü/fiyat satırı da o kadar kayıyordu. Açıklamaya iki satır
   ayrılıp alt satır kartın dibine sabitlendi. */
.tc-ad__slot-body { flex: 1 1 auto; }

.tc-ad__slot-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.8em;
}

.tc-ad__slot-meta { margin-top: auto; }

/* ---------------------------------------------------------------------------
   36 · Kilitli içerik

   Misafire "burada bir şey var" demenin yolu. Perdedeki metin gerçek içerik
   DEĞİL, yer tutucudur: kilitli kısım sunucuda kesilir, tarayıcıya hiç
   gönderilmez. Bulanıklık bir kilit değil, bir işarettir — gerçek metni
   gönderip CSS ile bulanıklaştırmak, kaynağı görüntüleyen herkese açık
   bırakmak demek olurdu.
   --------------------------------------------------------------------------- */

.tc-kilit {
    position: relative;
    margin-top: 14px;
    border-radius: var(--tc-radius);
    overflow: hidden;
}

/* Perde, üstündeki çağrı kutusundan kısa kalmamalı: kısa kalırsa kutu
   taşıyor ve kilit simgesi kırpılıyordu. */
.tc-kilit__perde {
    min-height: 240px;
    padding: 18px 18px 28px;
    color: var(--tc-muted);
    font-size: var(--tc-fs);
    line-height: 1.75;
    filter: blur(5px);
    opacity: .5;
    user-select: none;
    pointer-events: none;
}

.tc-kilit__perde p { margin: 0 0 10px; }

/* Kutu perdenin üstünde durur; okunması gereken tek metin bu */
.tc-kilit__kutu {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 18px;
    text-align: center;
    background: linear-gradient(180deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, .94) 55%);
}

.tc-kilit__ikon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--tc-primary-soft, #eaf0fa);
    color: var(--tc-primary, #18509e);
}

.tc-kilit__baslik {
    margin: 0;
    font-size: var(--tc-fs-title);
    font-weight: 500;
    color: var(--tc-ink);
}

.tc-kilit__metin {
    margin: 0;
    max-width: 430px;
    font-size: var(--tc-fs-sm);
    color: var(--tc-muted);
    line-height: 1.6;
}

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

/* Gizlenen ölçüler için etiket: değeri değil, orada bir değer olduğunu
   söyler. "0 ₺" ya da boş bırakmak yanlış bilgi verirdi. */
.tc-kilit-etiket {
    color: var(--tc-muted);
    opacity: .8;
}

.tc-kilit-etiket iconify-icon { opacity: .7; }

@media (max-width: 575.98px) {
    .tc-kilit__perde { padding-bottom: 40px; }
    .tc-kilit__eylem .tc-btn { width: 100%; justify-content: center; }
}

/* ---------------------------------------------------------------------------
   37 · Sektörden Haberler (blog)

   Kart yapısı sitedeki ilan kartıyla akraba: sabit oranlı görsel, iki satıra
   sabitlenmiş başlık, dibe yaslanan meta. Aynı ızgarada farklı yükseklikte
   kart olmaması için değişken olan her alana önceden yer ayrılıyor.
   --------------------------------------------------------------------------- */

.tc-blog-head { margin-bottom: 14px; }

.tc-blog-head__lead {
    margin: 6px 0 0;
    color: var(--tc-muted);
    font-size: var(--tc-fs);
}

/* Kategori şeridi — ilan süzgecindeki bölümlü denetimle aynı dil */
.tc-blog-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}

.tc-blog-tab {
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--tc-line-solid);
    background: var(--tc-surface);
    color: var(--tc-muted);
    font-size: var(--tc-fs-sm);
    text-decoration: none;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.tc-blog-tab:hover { border-color: var(--tc-primary); color: var(--tc-primary); }

.tc-blog-tab.is-current {
    background: var(--tc-primary);
    border-color: var(--tc-primary);
    color: #fff;
}

.tc-blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
}

.tc-blog-grid--dar { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

.tc-blog-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--tc-line-solid);
    border-radius: var(--tc-radius);
    background: var(--tc-surface);
    overflow: hidden;
    text-decoration: none !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.tc-blog-card:hover {
    border-color: var(--tc-primary);
    box-shadow: 0 4px 14px var(--tc-line);
}

.tc-blog-card__media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--tc-bg);
}

.tc-blog-card__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Kapağı olmayan yazı: boş kutu yerine simge, ızgara delik görünmesin */
.tc-blog-card__bos {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--tc-line-solid);
    background: var(--tc-bg);
}

.tc-blog-card__body {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1 1 auto;
    padding: 12px 14px 14px;
}

.tc-blog-card__cat {
    color: var(--tc-accent);
    font-size: 11.5px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.tc-blog-card__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.9em;
    color: var(--tc-ink);
    font-size: var(--tc-fs-title);
    font-weight: 500;
    line-height: 1.45;
}

.tc-blog-card__excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--tc-muted);
    font-size: var(--tc-fs-sm);
    line-height: 1.55;
}

/* Meta dibe yaslanır: özet bir ya da iki satır olsun, tarihler hizalı kalır */
.tc-blog-card__meta {
    margin-top: auto;
    padding-top: 8px;
    color: var(--tc-muted);
    font-size: var(--tc-fs-sm);
}

/* --- Yan kolon --- */

.tc-blog-aside__list {
    display: flex;
    flex-direction: column;
    margin-bottom: 18px;
}

.tc-blog-aside__link {
    padding: 8px 0;
    border-bottom: 1px solid var(--tc-line);
    color: var(--tc-ink);
    font-size: var(--tc-fs);
    text-decoration: none;
}

.tc-blog-aside__link:hover { color: var(--tc-primary); }

.tc-blog-aside__son {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 9px 0;
    border-bottom: 1px solid var(--tc-line);
    text-decoration: none;
}

.tc-blog-aside__son-baslik {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--tc-ink);
    font-size: var(--tc-fs-sm);
    line-height: 1.45;
}

.tc-blog-aside__son:hover .tc-blog-aside__son-baslik { color: var(--tc-primary); }

.tc-blog-aside__son-tarih { color: var(--tc-muted); font-size: 11.5px; }

/* --- Yazı sayfası --- */

.tc-blog-crumb {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    color: var(--tc-muted);
    font-size: var(--tc-fs-sm);
}

.tc-blog-crumb a { color: var(--tc-muted); text-decoration: none; }
.tc-blog-crumb a:hover { color: var(--tc-primary); }

.tc-blog-post__title {
    margin: 0 0 10px;
    font-size: 27px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--tc-ink);
}

.tc-blog-post__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 16px;
    color: var(--tc-muted);
    font-size: var(--tc-fs-sm);
}

.tc-blog-post__meta span { display: inline-flex; align-items: center; gap: 5px; }

.tc-blog-post__cover {
    margin-bottom: 18px;
    border-radius: var(--tc-radius);
    overflow: hidden;
}

.tc-blog-post__cover img { width: 100%; height: auto; display: block; }

/*
    Okuma sütunu.

    Genişlik burada, tek yerde belirleniyor. Önce her blok kendi
    `max-width: 68ch` değerini taşıyordu; `ch` elemanın kendi punto
    boyutuna bağlı olduğu için gövde 662, alt blok 683 piksel çıkıyordu
    ve iki kenar tutmuyordu. Başlıkla kırıntı ise hiç sınırlanmadığından
    metnin 300 piksel dışına taşıyordu.

    Sütun ortalanıyor: sola yaslıyken sağda kocaman bir ölü alan
    kalıyordu, çünkü satır uzunluğu sınırlı ama taşıyıcı kolon geniş.
*/
.tc-blog-okuma {
    max-width: 42rem;
    margin-inline: auto;
}

.tc-blog-post__body {
    color: var(--tc-ink);
    font-size: 15.5px;
    line-height: 1.75;
}

.tc-blog-post__body h2 { margin: 26px 0 10px; font-size: 20px; font-weight: 600; }
.tc-blog-post__body h3 { margin: 22px 0 8px; font-size: 17px; font-weight: 600; }
.tc-blog-post__body p { margin: 0 0 14px; }
.tc-blog-post__body ul,
.tc-blog-post__body ol { margin: 0 0 14px; padding-left: 22px; }
.tc-blog-post__body li { margin-bottom: 6px; }
/* Eski `style.css` bağlantılara küçük bir punto veriyor; okuma alanında
   bağlantı metnin geri kalanıyla aynı boyda olmalı. */
.tc-blog-post__body a { color: var(--tc-primary); font-size: inherit; text-decoration: underline; }
.tc-blog-post__body img { max-width: 100%; height: auto; border-radius: 8px; margin: 8px 0; }

.tc-blog-post__body blockquote {
    margin: 18px 0;
    padding: 12px 16px;
    border-left: 3px solid var(--tc-accent);
    background: var(--tc-bg);
    border-radius: 0 8px 8px 0;
    color: var(--tc-muted);
}

.tc-blog-post__body table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 16px;
    font-size: var(--tc-fs);
}

.tc-blog-post__body th,
.tc-blog-post__body td {
    padding: 8px 10px;
    border: 1px solid var(--tc-line-solid);
    text-align: left;
}

.tc-blog-post__body th { background: var(--tc-bg); font-weight: 500; }

@media (max-width: 575.98px) {
    .tc-blog-post__title { font-size: 22px; }
    .tc-blog-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   38 · Haber listesi ve yazı bitişi — düzeltmeler

   1. Liste ızgaradan yatay satıra geçti: az yazıda ızgaranın sağı boş
      kalıyordu, iki yazılık bir bölümde ekranın yarısı boştu.

   2. `style.css` içindeki `a { color: … !important; text-decoration: none
      !important }` kuralı yazı içindeki bağlantıları eziyordu — okuma
      alanında bağlantı düz metinden ayırt edilemiyordu. Genel kuralı
      değiştirmek sitenin tamamını etkileyeceği için karşılık burada,
      yalnızca yazı gövdesi için veriliyor.

   3. Yazı metin bitince sayfa da bitiyordu; okura sonraki adım yok.
   --------------------------------------------------------------------------- */

.tc-blog-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tc-blog-row {
    display: flex;
    gap: 16px;
    padding: 14px;
    border: 1px solid var(--tc-line-solid);
    border-radius: var(--tc-radius);
    background: var(--tc-surface);
    text-decoration: none !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.tc-blog-row:hover {
    border-color: var(--tc-primary);
    box-shadow: 0 4px 14px var(--tc-line);
}

.tc-blog-row__media {
    position: relative;
    flex: 0 0 220px;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    overflow: hidden;
    background: var(--tc-bg);
}

.tc-blog-row__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tc-blog-row__bos {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--tc-line-solid);
}

.tc-blog-row__body {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1 1 auto;
    min-width: 0;
}

.tc-blog-row__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--tc-ink);
    font-size: 17px;
    font-weight: 500;
    line-height: 1.4;
}

.tc-blog-row:hover .tc-blog-row__title { color: var(--tc-primary); }

.tc-blog-row__excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--tc-muted);
    font-size: var(--tc-fs);
    line-height: 1.6;
}

/* --- Yazı içi bağlantı --- */

.tc-blog-post__body a {
    color: var(--tc-primary) !important;
    text-decoration: underline !important;
    text-underline-offset: 2px;
    font-size: inherit;
}

.tc-blog-post__body a:hover { color: var(--tc-accent) !important; }

/* --- Yazı bitişi --- */

.tc-blog-post__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
    padding-top: 18px;
    border-top: 1px solid var(--tc-line);
}

.tc-blog-share {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tc-blog-share__label {
    color: var(--tc-muted);
    font-size: var(--tc-fs-sm);
}

.tc-blog-share__link {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--tc-line-solid);
    border-radius: 50%;
    background: var(--tc-surface);
    color: var(--tc-muted);
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.tc-blog-share__link:hover {
    border-color: var(--tc-primary);
    background: var(--tc-primary);
    color: #fff !important;
}

.tc-blog-post__geri {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--tc-primary) !important;
    font-size: var(--tc-fs-sm);
    text-decoration: none !important;
}

.tc-blog-post__geri:hover { color: var(--tc-accent) !important; }

@media (max-width: 575.98px) {
    .tc-blog-row { flex-direction: column; }
    .tc-blog-row__media { flex: none; width: 100%; }
    .tc-blog-post__foot { flex-direction: column; align-items: flex-start; }
}

/* Bağlantı renkleri.

   `style.css` içinde `a { color: var(--text-color) !important }` var; bu
   yüzden blog bölümündeki bağlantılar (kategori şeridi, yan kolon, kırıntı
   yolu) hangi renk verilirse verilsin siyah kalıyordu — seçili sekmenin
   yazısı mavi dolgunun üzerinde okunmuyordu.

   Genel kuralı `!important`tan kurtarmak sitenin tamamını etkileyeceği için
   karşılık burada, yalnızca bu bileşenler için veriliyor. */

.tc-blog-tab { color: var(--tc-muted) !important; }
.tc-blog-tab:hover { color: var(--tc-primary) !important; }
.tc-blog-tab.is-current { color: #fff !important; }

.tc-blog-aside__link { color: var(--tc-ink) !important; }
.tc-blog-aside__link:hover { color: var(--tc-primary) !important; }
.tc-blog-aside__son:hover .tc-blog-aside__son-baslik { color: var(--tc-primary); }

.tc-blog-crumb a { color: var(--tc-muted) !important; }
.tc-blog-crumb a:hover { color: var(--tc-primary) !important; }

.tc-blog-row__title { color: var(--tc-ink); }
.tc-blog-row:hover .tc-blog-row__title { color: var(--tc-primary); }

/* Kapağı olmayan yazının görsel alanı: boş gri bir dikdörtgen yerine
   markanın açık tonunda bir yüzey; ızgarada delik gibi durmasın. */
.tc-blog-row__media,
.tc-blog-card__media {
    background: linear-gradient(140deg, #eef2f8, #e6ebf3);
}

.tc-blog-row__bos,
.tc-blog-card__bos {
    background: transparent;
    color: #b7c2d4;
}