/* Metronic'in hazır styles.css'i yalnızca Metronic HTML'inde geçen sınıfları içerir (Tailwind derlemesi
   yapılmıyor). Panele özel görünüm burada düz CSS'tir. Renkler telefon uygulamasıyla aynıdır
   (MAUI spec §4): turkuaz #1FA5A8 → mavi #1E78B4, turuncu #F28C28, yeşil #6CB33F, kırmızı #C62828. */

:root {
    --dy-turkuaz: #1FA5A8;
    --dy-mavi: #1E78B4;
    --dy-turuncu: #F28C28;
    --dy-turuncu-koyu: #D97716;
    --dy-yesil: #6CB33F;
    --dy-kirmizi: #C62828;
    --dy-zemin: #F2F4F6;
    --dy-metin: #1F2D3D;
    --dy-ikincil: #6B7785;
    --dy-gecis: linear-gradient(135deg, #1FA5A8 0%, #1E78B4 100%);

    /* Metronic'in birincil rengi (düğmeler, bağlantılar, etkin menü) uygulamanın turkuazı olur.
       styles.css değişkenleri katman (@layer) içinde tanımlar; katmansız bu tanım onları ezer. */
    --primary: #1FA5A8;
    --primary-foreground: #FFFFFF;
}

/* ---------- Ortak ---------- */

.dy-gecis { background: var(--dy-gecis); color: #fff; }

.dy-btn-turuncu {
    background: var(--dy-turuncu);
    color: #fff;
    border: 0;
    border-radius: 999px;
    padding: 0 28px;
    height: 48px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    cursor: pointer;
}
.dy-btn-turuncu:hover { background: var(--dy-turuncu-koyu); color: #fff; }

.dy-btn-cizgili {
    background: transparent;
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, .8);
    border-radius: 999px;
    padding: 0 24px;
    height: 48px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}
.dy-btn-cizgili:hover { background: rgba(255, 255, 255, .12); color: #fff; }

.dy-buyuk-sayi { font-size: 2rem; font-weight: 700; line-height: 1.1; color: var(--dy-turkuaz); }
.dy-buyuk-sayi small { font-size: .9rem; font-weight: 500; color: var(--dy-ikincil); margin-inline-start: 4px; }
.dy-yesil { color: var(--dy-yesil); }
.dy-kirmizi { color: var(--dy-kirmizi); }

/* ---------- Vitrin ---------- */

.vt-sayfa { background: var(--dy-zemin); color: var(--dy-metin); min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; }
.vt-kap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 20px; }

.vt-ust { position: relative; z-index: 2; }
.vt-ust .vt-kap { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 12px; }
.vt-logo { display: flex; align-items: center; gap: 10px; color: #fff; font-size: 1.35rem; font-weight: 700; text-decoration: none; }
.vt-logo img { height: 36px; width: 36px; background: #fff; border-radius: 10px; padding: 3px; }
.vt-ust-sag { display: flex; align-items: center; gap: 10px; }
.vt-ust-giris { color: #fff; font-weight: 600; text-decoration: none; padding: 0 12px; }
.vt-ust-giris:hover { color: #fff; text-decoration: underline; }

.vt-kahraman { background: var(--dy-gecis); color: #fff; margin-top: -72px; padding: 132px 0 96px; border-bottom-left-radius: 40px; border-bottom-right-radius: 40px; }
.vt-kahraman .vt-kap { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; }
.vt-kahraman h1 { font-size: 3rem; line-height: 1.12; font-weight: 800; letter-spacing: -.02em; margin: 0 0 20px; color: #fff; }
.vt-kahraman p { font-size: 1.2rem; line-height: 1.6; opacity: .92; margin: 0 0 32px; max-width: 560px; }
.vt-eylemler { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.vt-not { margin-top: 16px; font-size: .95rem; opacity: .85; }

/* Telefon önizlemesi: gerçek uygulamanın Çek ekranının sadeleştirilmiş hali. */
.vt-telefon { justify-self: center; width: 290px; background: #fff; border-radius: 36px; padding: 14px; box-shadow: 0 30px 60px rgba(0, 0, 0, .25); color: var(--dy-metin); }
.vt-telefon-ust { background: var(--dy-gecis); border-radius: 24px; padding: 18px; color: #fff; }
.vt-telefon-ust span { display: block; font-size: .8rem; opacity: .85; }
.vt-telefon-ust strong { font-size: 1.9rem; font-weight: 800; }
.vt-telefon-kart { background: var(--dy-zemin); border-radius: 18px; margin-top: 12px; padding: 14px; }
.vt-telefon-kart h4 { margin: 0 0 8px; font-size: .95rem; font-weight: 700; }
.vt-telefon-satir { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid #e3e7eb; font-size: .9rem; }
.vt-telefon-satir:last-child { border-bottom: 0; }
.vt-telefon-satir b { color: var(--dy-turkuaz); }
.vt-telefon-dugme { margin: 16px auto 4px; width: 64px; height: 64px; border-radius: 50%; background: var(--dy-turuncu); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.6rem; }

.vt-bolum { padding: 72px 0 24px; }
.vt-bolum h2 { font-size: 2rem; font-weight: 800; text-align: center; margin: 0 0 36px; }
.vt-kartlar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.vt-kart { background: #fff; border-radius: 20px; padding: 28px; box-shadow: 0 8px 24px rgba(31, 45, 61, .06); }
.vt-kart i { font-size: 2rem; color: var(--dy-turkuaz); }
.vt-kart h3 { font-size: 1.2rem; font-weight: 700; margin: 14px 0 8px; }
.vt-kart p { color: var(--dy-ikincil); margin: 0; line-height: 1.55; }
.vt-adimlar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; counter-reset: adim; }
.vt-adim { background: #fff; border-radius: 20px; padding: 24px 24px 24px 76px; position: relative; line-height: 1.55; }
.vt-adim::before { counter-increment: adim; content: counter(adim); position: absolute; left: 24px; top: 22px; width: 36px; height: 36px; border-radius: 50%; background: var(--dy-turuncu); color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; }
[dir="rtl"] .vt-adim { padding: 24px 76px 24px 24px; }
[dir="rtl"] .vt-adim::before { left: auto; right: 24px; }

.vt-alt { margin-top: auto; padding: 32px 0; color: var(--dy-ikincil); font-size: .9rem; }
.vt-alt .vt-kap { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }

@media (max-width: 960px) {
    .vt-kahraman .vt-kap { grid-template-columns: 1fr; }
    .vt-kahraman h1 { font-size: 2.2rem; }
    .vt-kartlar, .vt-adimlar { grid-template-columns: 1fr; }
    .vt-ust-giris { display: none; }
    .vt-kahraman .vt-kap > * { min-width: 0; }
}

/* Telefon: üst çubukta yalnızca logo, bayrak ve giriş; "Ücretsiz başla" kahraman bölümünde zaten var. */
@media (max-width: 640px) {
    .vt-ust .dy-btn-turuncu { display: none; }
    .vt-ust-giris { display: inline; padding: 0 4px; }
    .dy-dil-dugme span { display: none; }
    .vt-kahraman { padding: 116px 0 64px; border-bottom-left-radius: 28px; border-bottom-right-radius: 28px; }
    .vt-kahraman h1 { font-size: 1.85rem; }
    .vt-kahraman p { font-size: 1.05rem; }
    .vt-telefon { width: 100%; max-width: 290px; }
    .vt-bolum { padding: 48px 0 8px; }
    .vt-bolum h2 { font-size: 1.6rem; }
}

/* ---------- Dil seçici (vitrin ve giriş sayfalarında beyaz zemin üstünde) ---------- */

.dy-dil-dugme { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: 999px; background: rgba(255, 255, 255, .16); color: #fff; border: 0; cursor: pointer; font-weight: 600; font-size: .875rem; }
.dy-dil-dugme img { width: 18px; height: 18px; border-radius: 50%; }
.dy-dil-liste { max-height: 360px; overflow-y: auto; }
.dy-dil-liste img { width: 16px; height: 16px; border-radius: 50%; }

/* ---------- Panel düzeni ---------- */

.dy-logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.1rem; color: var(--dy-metin); }
.dy-logo img, .dy-logo-kucuk { width: 30px; height: 30px; }
.dy-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--dy-gecis); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem; flex-shrink: 0; }
.dy-dil-dugme-panel { display: inline-flex; align-items: center; gap: 6px; }
.dy-dil-dugme-panel img { width: 18px; height: 18px; border-radius: 50%; }

/* Kimlik sayfalarının sağ paneli (Metronic "branded" düzeni, görsel yerine uygulama renkleri). */
.hs-marka { background: var(--dy-gecis); color: #fff; border-radius: 16px; align-items: center; }
.hs-marka-baslik { font-size: 2rem; font-weight: 800; line-height: 1.2; max-width: 420px; color: #fff; }
.hs-marka-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; font-size: 1.05rem; }
.hs-marka-liste li { display: flex; align-items: center; gap: 10px; }
.hs-marka-liste i { font-size: 1.3rem; color: #fff; }

/* ---------- Danışanlarım ---------- */

.dy-ilerleme { height: 8px; border-radius: 999px; background: #E9ECEF; overflow: hidden; }
.dy-ilerleme span { display: block; height: 100%; border-radius: 999px; background: var(--dy-gecis); }
.dy-ilerleme span.dy-ilerleme-dolu { background: var(--dy-turuncu); }

.dy-tablo-kalori { font-size: 1.35rem; font-weight: 700; color: var(--dy-turkuaz); line-height: 1.1; }
.dy-tablo-kalori small { font-size: .75rem; font-weight: 500; color: var(--dy-ikincil); margin-inline-start: 3px; }
.dy-soluk { color: #B8C0C8; }
.dy-avatar-pasif { background: #B8C0C8; }
.dy-tablo td, .dy-tablo th { vertical-align: middle; }
.dy-tablo td { padding-top: 12px; padding-bottom: 12px; }
.dt-container { padding: 16px 20px; }

.dy-davet-kodu { font-size: 2.6rem; font-weight: 800; letter-spacing: .12em; color: var(--dy-metin); font-variant-numeric: tabular-nums; }
.dy-btn-whatsapp { background: #25D366; color: #fff; border-radius: 10px; height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; text-decoration: none; }
.dy-btn-whatsapp:hover { background: #1EBE5A; color: #fff; }

/* Danışanlarım satır düğmeleri: simge + yazı, sığmazsa alt satıra geçer; düğme içi yazı bölünmez. */
.dy-satir-islemleri { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; min-width: 260px; }
.dy-satir-islemleri .kt-btn { white-space: nowrap; }
.dy-btn-whatsapp-kucuk { background: #25D366; border: 1px solid #25D366; color: #fff; }
.dy-btn-whatsapp-kucuk:hover { background: #1EBE5A; border-color: #1EBE5A; color: #fff; }
.dy-btn-tehlike { color: var(--destructive); }
/* Telefonda (< 768 px) işlem sütunu ve "Son kilo" gizlenir; aynı düğmeler danışan adının altında çıkar. */
.dy-telefon-islemleri { display: none; }
@media (max-width: 767.98px) {
    #danisan_tablosu th:nth-child(3), #danisan_tablosu td:nth-child(3),
    #danisan_tablosu th.dy-islem-sutunu, #danisan_tablosu td.dy-islem-sutunu, #danisan_tablosu th:last-child { display: none; }
    .dy-telefon-islemleri { display: flex; justify-content: flex-start; min-width: 0; margin-top: 10px; }
}

/* Telefonda tablo sıkışmasın: tablo satırı yatay kayar, sayfa kaymaz. */
/* Flex öğeleri varsayılan olarak içeriklerinden dar olamaz (min-width: auto); geniş tablo sayfayı genişletmesin. */
body.demo1 > .flex.grow, .kt-wrapper, #content, #content > .kt-container-fixed, .kt-card { min-width: 0; }
.dt-container { width: 100%; max-width: 100%; }
.dt-layout-row.dt-layout-table { display: block; overflow-x: auto; width: 100%; }
.dy-tablo { min-width: 640px; }
@media (max-width: 640px) {
    .dt-container { padding: 12px; }
}

/* ---------- Danışan detayı ---------- */

.dy-avatar-buyuk { width: 56px; height: 56px; font-size: 1.2rem; }
.dy-gun-secici { width: 170px; }
.dy-makro { display: flex; flex-direction: column; gap: 2px; padding-inline-start: 20px; border-inline-start: 1px solid var(--border, #E3E7EB); }
.dy-makro span { font-size: .8rem; color: var(--dy-ikincil); }
.dy-makro strong { font-size: 1.15rem; color: var(--dy-metin); }
.dy-ogun-karti { overflow: hidden; }
.dy-ogun-foto { display: block; width: 100%; height: 240px; object-fit: cover; background: #E9ECEF; }
.dy-kalem-tablosu td, .dy-kalem-tablosu th { font-size: .875rem; }
.dy-kalem-islemleri { display: flex; flex-wrap: wrap; gap: 6px; }
.dy-kalem-islemleri .kt-btn { white-space: nowrap; }
/* Telefonda (< 768 px) porsiyon sütunu gizlenir; kalem düğmeleriyle birlikte kcal sütunu ekrandan taşıyordu. */
@media (max-width: 767.98px) {
    .dy-kalem-tablosu th:nth-child(3), .dy-kalem-tablosu td:nth-child(3) { display: none; }
}
/* Kalem penceresi: seçili yemek ve arama sonuçları (tıklanabilir satırlar). */
.dy-kalem-secili { font-weight: 600; color: var(--dy-metin); }
.dy-kalem-secili:empty { display: none; }
.dy-besin-sonuclari { display: flex; flex-direction: column; max-height: 220px; overflow-y: auto; border-radius: 8px; }
.dy-besin-sonuclari:not(:empty) { border: 1px solid var(--border, #E5E7EB); }
.dy-besin-sonucu { display: flex; justify-content: space-between; gap: 12px; padding: 9px 12px; text-align: start; font-size: .875rem; background: transparent; border: 0; border-bottom: 1px solid var(--border, #E5E7EB); cursor: pointer; }
.dy-besin-sonucu:last-child { border-bottom: 0; }
.dy-besin-sonucu:hover { background: var(--dy-zemin); }
.dy-besin-sonucu.dy-secili { background: rgba(31, 165, 168, .12); font-weight: 600; }
.dy-besin-sonucu span:last-child { color: var(--dy-ikincil); white-space: nowrap; }
.dy-besin-sonuc-yok { padding: 9px 12px; font-size: .875rem; color: var(--dy-ikincil); }

/* ---------- Abonelik ---------- */

.dy-plan-karti { border: 1.5px solid transparent; }
.dy-plan-mevcut { border-color: var(--dy-turkuaz); }
.dy-plan-karti .dy-btn-turuncu { width: 100%; }
.dy-sonuc-ikon { font-size: 3.5rem; }
.dy-sahte-banka { background: repeating-linear-gradient(45deg, #FFF7E6, #FFF7E6 12px, #FFEFD1 12px, #FFEFD1 24px); }
.dy-kaydir { overflow-x: auto; max-width: 100%; }
.dy-sahte-banka { min-height: 100vh; }

/* Onay penceresi (_OnayModal): tarayıcının confirm penceresi yerine. */
.dy-onay-ikon { width: 52px; height: 52px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; background: color-mix(in oklab, var(--primary) 12%, transparent); color: var(--primary); }
.dy-onay-ikon.dy-onay-ikon-tehlike { background: color-mix(in oklab, var(--destructive) 12%, transparent); color: var(--destructive); }

/* Yönetim listeleri: uzun e-posta dar sütunda satır kırar; filtre seçimi etiketinin yanında durur. */
.dy-kir { overflow-wrap: break-word; }
.dy-filtre { justify-content: flex-start; }
.dy-filtre .kt-form-label { width: auto; flex: 0 0 auto; }
.dy-filtre .kt-select { flex: 0 0 240px; width: 240px; }
/* Yönetim listeleri: sütunlar içeriğe göre (DataTables tabloyu sabit düzende çizip eşit böler, e-postayı kırıyordu). */
table.dataTable.dy-tablo-oto { table-layout: auto; }
/* Ülke ücretleri tablosu: TL kutusu dar, € karşılığı yanında; hatalı hücre kırmızı çerçeveli. */
.dy-ucret-kutusu { width: 110px; flex: 0 0 110px; }
.dy-ucret-kutusu.dy-ucret-hatali { border-color: var(--destructive); box-shadow: 0 0 0 1px var(--destructive); }
/* € karşılığı aylık üst sınırı aşıyor (text-secondary-foreground'u ezer). */
.dy-sinir-asildi, .text-secondary-foreground.dy-sinir-asildi { color: var(--destructive); font-weight: 600; }