/* WhatsApp Ajans Paneli — tasarım aşaması */
:root {
    --wa-koyu: #0b3d35;
    --wa-koyu2: #0f4f45;
    --wa-yesil: #25d366;
    --wa-teal: #128c7e;
    --wa-acik: #e9f7ef;
    --wa-zemin: #f3f6f4;
    --wa-cizgi: #e3e9e6;
    --wa-metin: #1f2a28;
    --wa-soluk: #6b7a76;
    --sidebar-w: 248px;
}

html, body { height: 100%; }
.wa-body { margin: 0; background: var(--wa-zemin); color: var(--wa-metin); font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 14.5px; }
a { color: var(--wa-teal); text-decoration: none; }
a:hover { text-decoration: underline; }
code { color: #0f4f45; background: #eef3f1; padding: 1px 5px; border-radius: 4px; font-size: .86em; }

/* Sidebar */
.wa-sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w); background: linear-gradient(180deg, var(--wa-koyu) 0%, var(--wa-koyu2) 100%); color: #d7e7e2; display: flex; flex-direction: column; z-index: 1030; transition: transform .25s ease; }
.wa-brand { display: flex; align-items: center; gap: 12px; padding: 20px 20px 16px; color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.08); }
.wa-brand:hover { text-decoration: none; color: #fff; }
.wa-brand-ikon { width: 40px; height: 40px; border-radius: 12px; background: var(--wa-yesil); color: #053a2b; display: grid; place-items: center; font-size: 22px; }
.wa-brand-metin { font-weight: 600; line-height: 1.1; font-size: 17px; }
.wa-brand-metin small { display: block; font-weight: 400; font-size: 12px; color: #9fc5ba; margin-top: 2px; }
.wa-nav { padding: 12px 10px; display: flex; flex-direction: column; gap: 2px; }
.wa-nav a { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 10px; color: #cfe3dc; text-decoration: none; font-weight: 500; border-left: 3px solid transparent; }
.wa-nav a i { font-size: 17px; width: 20px; text-align: center; opacity: .9; }
.wa-nav a:hover { background: rgba(255,255,255,.07); color: #fff; }
.wa-nav a.active { background: rgba(37,211,102,.16); color: #fff; border-left-color: var(--wa-yesil); }
.wa-sidebar-alt { margin-top: auto; padding: 14px 16px 18px; border-top: 1px solid rgba(255,255,255,.08); }
.wa-mod { display: flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 8px 10px; border-radius: 8px; background: rgba(255,255,255,.06); }
.wa-mod.sim { color: #ffd98a; }
.wa-mod.canli { color: #8df0b4; }

/* Main */
.wa-main { margin-left: var(--sidebar-w); min-height: 100vh; display: flex; flex-direction: column; }
.wa-topbar { position: sticky; top: 0; z-index: 1020; display: flex; align-items: center; gap: 10px; padding: 12px 28px; background: #fff; border-bottom: 1px solid var(--wa-cizgi); min-height: 64px; }
.wa-sayfa-baslik { font-size: 19px; font-weight: 600; margin: 0; color: var(--wa-metin); }
.wa-content { padding: 24px 28px; flex: 1; }
.wa-footer { padding: 14px 28px; font-size: 12px; color: var(--wa-soluk); border-top: 1px solid var(--wa-cizgi); background: #fff; }

/* Cards */
.wa-card { background: #fff; border: 1px solid var(--wa-cizgi); border-radius: 14px; padding: 20px; }
.wa-card-baslik { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.wa-card-baslik h2 { font-size: 15px; font-weight: 600; margin: 0; }
.wa-card-baslik a { font-size: 13px; }
.wa-card-bilgi { background: #fbfdfc; border-style: dashed; }
.wa-card-bilgi h2 { font-weight: 600; }

/* KPI */
.kpi { background: #fff; border: 1px solid var(--wa-cizgi); border-radius: 14px; padding: 16px 18px; height: 100%; position: relative; }
.kpi-ikon { position: absolute; right: 14px; top: 12px; width: 34px; height: 34px; border-radius: 10px; background: var(--wa-acik); color: var(--wa-teal); display: grid; place-items: center; font-size: 16px; }
.kpi-deger { font-size: 26px; font-weight: 700; line-height: 1.1; }
.kpi-etiket { font-size: 12.5px; color: var(--wa-soluk); margin-top: 4px; }
.mini-kpi { background: #f8faf9; border-radius: 10px; padding: 10px 6px; }
.mini-kpi .deger { font-size: 20px; font-weight: 700; line-height: 1.1; }
.mini-kpi .etiket { font-size: 11.5px; color: var(--wa-soluk); }

/* Buttons */
.btn-wa { background: var(--wa-teal); border-color: var(--wa-teal); color: #fff; font-weight: 500; }
.btn-wa:hover, .btn-wa:focus { background: #0f786c; border-color: #0f786c; color: #fff; }
.btn-meta { background: #1877f2; border-color: #1877f2; color: #fff; font-weight: 500; }
.btn-meta:hover { background: #1464cf; border-color: #1464cf; color: #fff; }

/* Tables */
.table-wa th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--wa-soluk); font-weight: 600; border-bottom: 1px solid var(--wa-cizgi); white-space: nowrap; }
.table-wa td { vertical-align: middle; border-color: #eef2f0; }
.table-wa tbody tr:hover { background: #fafcfb; }

/* Badges / chips */
.rozet { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; line-height: 1.3; }
.rozet.buyuk { font-size: 13px; padding: 5px 12px; }
.rozet.success { background: #e3f6ea; color: #146c43; }
.rozet.danger { background: #fde8e8; color: #a12622; }
.rozet.warning { background: #fff3d6; color: #8a5a00; }
.rozet.info { background: #e1f1fb; color: #0c5a8a; }
.rozet.primary { background: #e4ecfb; color: #2047a8; }
.rozet.secondary { background: #eef1f0; color: #4f5c58; }
.etiket { display: inline-block; font-size: 11.5px; background: #eef3f1; color: #2f4a44; padding: 2px 8px; border-radius: 6px; margin: 1px 3px 1px 0; }
.nokta { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 3px; vertical-align: middle; }
.nokta.success { background: #28a745; } .nokta.warning { background: #f0ad00; } .nokta.danger { background: #dc3545; }
.sablon-cip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--wa-cizgi); border-radius: 10px; background: #fff; text-decoration: none; color: inherit; }
.sablon-cip:hover { border-color: var(--wa-teal); text-decoration: none; }
.filtre { font-size: 12.5px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--wa-cizgi); color: var(--wa-soluk); text-decoration: none; }
.filtre.aktif, .filtre:hover { background: var(--wa-acik); color: var(--wa-teal); border-color: #bfe3d3; text-decoration: none; }

/* Alerts */
.alert-sim { background: #fff8e6; border: 1px solid #ffe4a3; color: #5e4300; border-radius: 12px; }

/* Lists */
.bilgi-listesi { display: grid; grid-template-columns: 150px 1fr; gap: 6px 12px; margin: 0; }
.bilgi-listesi dt { color: var(--wa-soluk); font-weight: 500; font-size: 13px; }
.bilgi-listesi dd { margin: 0; }
.olay-listesi { list-style: none; margin: 0; padding: 0; }
.olay-listesi li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid #f0f3f2; }
.olay-listesi li:last-child { border-bottom: 0; }
.olay-tur { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; padding: 3px 7px; border-radius: 6px; background: #eef1f0; color: #4f5c58; font-weight: 600; white-space: nowrap; margin-top: 2px; }
.olay-tur.webhook { background: #e1f1fb; color: #0c5a8a; }
.olay-tur.aggecidi { background: #e3f6ea; color: #146c43; }
.olay-tur.onboarding { background: #ede7fb; color: #4b2ea8; }
.akis { padding-left: 18px; margin: 0; }
.akis li { margin-bottom: 8px; font-size: 13.5px; }
.kontrol-listesi { list-style: none; padding: 0; margin: 0; }
.kontrol-listesi li { display: flex; gap: 8px; align-items: center; padding: 6px 0; font-size: 13.5px; color: var(--wa-soluk); }
.kontrol-listesi li i::before { content: "\f28a"; }
.kontrol-listesi li.ok { color: var(--wa-metin); }
.kontrol-listesi li.ok i { color: #28a745; }
.kontrol-listesi li.ok i::before { content: "\f26b"; }
.hesap-satir { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid #f0f3f2; }
.hesap-satir:last-child { border-bottom: 0; }
.hesap-ikon { width: 40px; height: 40px; border-radius: 12px; background: var(--wa-acik); color: var(--wa-teal); display: grid; place-items: center; font-size: 18px; flex-shrink: 0; }
.hesap-ikon.buyuk { width: 50px; height: 50px; font-size: 24px; }
.musteri-kart { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--wa-cizgi); border-radius: 12px; color: inherit; text-decoration: none; background: #fff; }
.musteri-kart:hover { border-color: var(--wa-teal); text-decoration: none; }
.govde-metin { white-space: pre-wrap; font-family: inherit; background: #f8faf9; border-radius: 8px; padding: 10px 12px; margin: 0; font-size: 13.5px; }
.kod-blok { background: #0f1f1c; color: #cfe8df; border-radius: 10px; padding: 12px 14px; font-size: 12px; white-space: pre-wrap; word-break: break-word; max-height: 320px; overflow: auto; }

/* Stepper */
.adimlar { display: flex; gap: 8px; flex-wrap: wrap; }
.adim { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--wa-cizgi); color: var(--wa-soluk); font-size: 13px; }
.adim span { width: 22px; height: 22px; border-radius: 50%; background: #eef1f0; display: grid; place-items: center; font-size: 12px; font-weight: 600; }
.adim.tamam { color: var(--wa-metin); }
.adim.tamam span { background: #d7f5e3; color: #146c43; }
.adim.aktif { border-color: var(--wa-teal); color: var(--wa-teal); background: var(--wa-acik); }
.adim.aktif span { background: var(--wa-teal); color: #fff; }

/* Variable mapping */
.degisken-alani { border: 1px dashed var(--wa-cizgi); border-radius: 10px; padding: 12px; background: #fbfdfc; }
.degisken-satir { display: grid; grid-template-columns: 70px 1fr 1fr; gap: 8px; align-items: center; margin-bottom: 8px; }
.degisken-satir code { font-size: 13px; }

/* Phone mockup */
.onizleme-yapiskan { position: sticky; top: 84px; }
.wa-phone { width: 100%; max-width: 330px; margin: 0 auto; background: #111; border-radius: 34px; padding: 10px; box-shadow: 0 14px 34px rgba(0,0,0,.18); }
.wa-phone-ust { display: flex; align-items: center; gap: 8px; background: #075e54; color: #fff; padding: 12px 12px 10px; border-radius: 24px 24px 0 0; font-size: 14px; }
.wa-phone-avatar { width: 30px; height: 30px; border-radius: 50%; background: #fff; color: #075e54; display: grid; place-items: center; font-size: 14px; }
.wa-phone-ad { font-weight: 600; display: flex; align-items: center; gap: 4px; }
.wa-phone-ad i { color: #25d366; font-size: 13px; }
.wa-phone-govde { background: #e5ddd5 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><circle cx='20' cy='20' r='1' fill='%23d6cdc3'/></svg>"); min-height: 300px; padding: 12px 10px 14px; }
.wa-tarih-etiketi { text-align: center; font-size: 11px; color: #5b6b66; margin-bottom: 10px; }
.wa-tarih-etiketi::after { content: ""; }
.wa-balon { background: #fff; border-radius: 0 10px 10px 10px; padding: 6px 8px 4px; max-width: 92%; box-shadow: 0 1px 1px rgba(0,0,0,.08); font-size: 13.5px; position: relative; }
.wa-balon-gorsel { height: 110px; border-radius: 8px; background: linear-gradient(135deg, #cfe9dd, #9fd3bd); display: flex; flex-direction: column; align-items: center; justify-content: center; color: #1f5f4a; font-size: 12px; margin-bottom: 6px; gap: 4px; }
.wa-balon-gorsel i { font-size: 26px; }
.wa-balon-baslik { font-weight: 700; margin-bottom: 4px; }
.wa-balon-metin { white-space: pre-wrap; word-break: break-word; line-height: 1.4; }
.wa-balon-alt { color: #8696a0; font-size: 12px; margin-top: 6px; }
.wa-balon-saat { text-align: right; font-size: 10.5px; color: #8696a0; margin-top: 2px; }
.wa-balon-saat i { color: #53bdeb; }
.wa-butonlar { max-width: 92%; margin-top: 3px; display: flex; flex-direction: column; gap: 3px; }
.wa-buton { background: #fff; border-radius: 8px; padding: 8px; text-align: center; color: #00a5f4; font-size: 13.5px; font-weight: 500; box-shadow: 0 1px 1px rgba(0,0,0,.08); }
.wa-buton i { margin-right: 4px; }
.wa-phone-alt { display: flex; align-items: center; gap: 10px; background: #f0f0f0; padding: 8px 10px; border-radius: 0 0 24px 24px; color: #8a8a8a; font-size: 13px; }
.wa-phone-alt span:first-of-type { flex: 1; background: #fff; border-radius: 999px; padding: 6px 12px; }
.wa-mikrofon { width: 34px; height: 34px; border-radius: 50%; background: #00a884; color: #fff; display: grid; place-items: center; }

/* Inbox */
.sohbet-listesi { display: flex; flex-direction: column; }
.sohbet-satir { display: flex; gap: 12px; align-items: center; padding: 12px 6px; border-bottom: 1px solid #f0f3f2; color: inherit; text-decoration: none; }
.sohbet-satir:hover { background: #fafcfb; text-decoration: none; }
.sohbet-satir:last-child { border-bottom: 0; }
.avatar { width: 42px; height: 42px; border-radius: 50%; background: #d7f0e4; color: #0f6e56; display: grid; place-items: center; font-weight: 700; flex-shrink: 0; }
.min-w-0 { min-width: 0; }
.sohbet-kart { padding: 0; overflow: hidden; }
.sohbet-ust { display: flex; gap: 12px; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--wa-cizgi); }
.sohbet-govde { background: #e5ddd5; padding: 18px; min-height: 380px; max-height: 60vh; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.balon { max-width: 70%; padding: 7px 10px 4px; border-radius: 10px; font-size: 14px; box-shadow: 0 1px 1px rgba(0,0,0,.08); }
.balon.gelen { background: #fff; align-self: flex-start; border-top-left-radius: 0; }
.balon.giden { background: #dcf8c6; align-self: flex-end; border-top-right-radius: 0; }
.balon-etiket { font-size: 11px; color: #4b6a5f; margin-bottom: 3px; }
.balon-metin { white-space: pre-wrap; word-break: break-word; }
.balon-saat { text-align: right; font-size: 10.5px; color: #7b8b86; margin-top: 2px; }
.balon-saat i.okundu { color: #53bdeb; }
.sohbet-alt { padding: 12px 18px; border-top: 1px solid var(--wa-cizgi); background: #fff; }

/* Mesaj merkezi */
.mesaj-hero { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; overflow: hidden; padding: 32px 36px; margin-bottom: 20px; border-radius: 22px; color: #fff; background: radial-gradient(ellipse at 95% 0, #238f77 0, transparent 55%), linear-gradient(115deg, #073f37, #106f5c); }
.mesaj-eyebrow { display: inline-flex; align-items: center; gap: 8px; color: #a5efce; font-size: 11px; font-weight: 700; letter-spacing: .13em; }
.mesaj-hero h2 { margin: 12px 0 8px; font-size: clamp(25px, 2.6vw, 36px); font-weight: 750; letter-spacing: -.04em; }
.mesaj-hero p { margin: 0; color: #c4e5da; line-height: 1.7; }
.mesaj-hero-icon { display: grid; place-items: center; flex-shrink: 0; width: 104px; height: 104px; border: 1px solid #ffffff30; border-radius: 28px; background: #ffffff10; font-size: 48px; color: #9af2ba; transform: rotate(-9deg); }
.mesaj-ozet { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }
.mesaj-ozet > div { display: flex; align-items: center; gap: 14px; padding: 18px 22px; background: #fff; border: 1px solid var(--wa-cizgi); border-radius: 16px; box-shadow: 0 4px 16px #123f2d04; }
.mesaj-ozet-icon, .mesaj-panel-icon { display: grid; place-items: center; width: 46px; height: 46px; flex-shrink: 0; border-radius: 14px; color: #087d58; background: #ddf8e9; font-size: 21px; }
.mesaj-ozet-icon.mor { color: #7450bb; background: #f0eafd; }
.mesaj-ozet-icon.turuncu { color: #b77516; background: #fff2d8; }
.mesaj-ozet strong { display: block; font-size: 25px; line-height: 1.2; letter-spacing: -.04em; }
.mesaj-ozet small { display: block; color: var(--wa-soluk); margin-top: 4px; }
.mesaj-workspace .wa-card { border-radius: 18px; box-shadow: 0 5px 24px #163e2f04; }
.mesaj-kanal { font-size: 11px; font-weight: 600; color: #087a51; background: #e8faf0; padding: 5px 10px; border-radius: 20px; }
.mesaj-araclar { display: flex; align-items: center; gap: 10px; margin: 18px 0; }
.mesaj-arama { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; padding: 11px 14px; border: 1px solid #e3ebe6; border-radius: 12px; background: #f7faf8; color: #74867c; }
.mesaj-arama input { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--wa-metin); background: transparent; font: inherit; font-size: 13px; }
.mesaj-arama:focus-within { border-color: #128c7e; box-shadow: 0 0 0 3px #128c7e18; }
.mesaj-inbox .sohbet-satir { padding: 17px 12px; gap: 14px; border-radius: 12px; transition: background .18s, transform .18s; }
.mesaj-inbox .sohbet-satir:hover { background: #edf9f2; transform: translateX(2px); }
.mesaj-inbox .sohbet-satir.okunmamis { background: #f1fbf5; border-left: 3px solid #20b775; margin-bottom: 5px; }
.mesaj-workspace .avatar { width: 46px; height: 46px; border-radius: 16px; background: linear-gradient(140deg, #d8f6e8, #b7e8d6); color: #096448; font-size: 18px; }
.mesaj-inbox .sohbet-satir:nth-child(3n+2) .avatar { background: #eee7fa; color: #7855aa; }
.mesaj-inbox .sohbet-satir:nth-child(3n) .avatar { background: #fff0da; color: #a36a24; }
.mesaj-inbox .sohbet-satir .text-truncate { max-width: 100%; margin: 5px 0; }
.mesaj-inbox .sohbet-satir > .text-end { flex-shrink: 0; }
.mesaj-panel-icon { margin-bottom: 16px; }
.mesaj-deneme { border-top: 3px solid #23b97a; }
.mesaj-workspace .form-control, .mesaj-workspace .form-select { border-radius: 10px; padding: 10px 12px; border-color: #dde7e1; }
.mesaj-workspace .btn { border-radius: 10px; padding: 10px 14px; }
.mesaj-workspace .btn-wa { background: #087b59; border-color: #087b59; box-shadow: 0 4px 10px #087b591c; }
.mesaj-workspace .btn-wa:hover { background: #056448; border-color: #056448; }
.mesaj-bos { padding: 36px 16px; text-align: center; color: var(--wa-soluk); }
.mesaj-bos > i { display: block; font-size: 36px; color: #15986e; margin-bottom: 12px; }
.mesaj-bos strong { display: block; color: var(--wa-metin); }
.mesaj-bos p { font-size: 13px; margin: 8px 0 0; }
.mesaj-workspace [hidden] { display: none !important; }
.mesaj-workspace .sohbet-ust { padding: 20px; background: #fff; flex-wrap: wrap; }
.mesaj-workspace .sohbet-govde { min-height: 440px; padding: 26px; gap: 16px; background-color: #edf5ef; background-image: radial-gradient(#b4cfbe66 1px, transparent 1px); background-size: 22px 22px; }
.mesaj-workspace .balon { max-width: 82%; padding: 12px 16px 8px; line-height: 1.6; border-radius: 16px; box-shadow: 0 3px 8px #123c2810; }
.mesaj-workspace .balon.giden { background: #d1f5df; border-bottom-right-radius: 4px; }
.mesaj-workspace .balon.gelen { border-bottom-left-radius: 4px; }
.mesaj-workspace .sohbet-alt { padding: 18px; }
.mesaj-workspace .sohbet-alt .btn { min-width: 48px; }
.mesaj-workspace a:focus-visible, .mesaj-workspace button:focus-visible { outline: 3px solid #128c7e; outline-offset: 3px; }
@media (max-width: 767.98px) {
    .mesaj-hero { padding: 24px; }
    .mesaj-hero-icon { display: none; }
    .mesaj-ozet { gap: 8px; }
    .mesaj-ozet > div { padding: 14px 10px; flex-direction: column; align-items: flex-start; gap: 10px; }
    .mesaj-ozet small { font-size: 11px; }
    .mesaj-inbox .sohbet-satir { flex-wrap: wrap; padding: 14px 8px; }
    .mesaj-inbox .sohbet-satir > .min-w-0 { flex-basis: calc(100% - 64px); }
    .mesaj-inbox .sohbet-satir > .text-end { margin-left: 60px; text-align: left !important; }
    .mesaj-workspace .sohbet-govde { padding: 16px; min-height: 320px; }
    .mesaj-araclar { flex-wrap: wrap; }
}

/* Responsive */
@media (max-width: 991.98px) {
    .wa-sidebar { transform: translateX(-100%); }
    body.menu-acik .wa-sidebar { transform: translateX(0); box-shadow: 0 0 0 100vmax rgba(0,0,0,.35); }
    .wa-main { margin-left: 0; }
    .wa-topbar, .wa-content, .wa-footer { padding-left: 16px; padding-right: 16px; }
    .onizleme-yapiskan { position: static; }
    .bilgi-listesi { grid-template-columns: 1fr; }
    .degisken-satir { grid-template-columns: 1fr; }
}

/* ---- Giriş / genel sayfalar ---- */
.giris-body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: linear-gradient(160deg, #0b3d35 0%, #128c7e 55%, #25d366 130%); font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; color: #1f2a28; }
.giris-sayfa { flex: 1; display: flex; align-items: center; justify-content: center; padding: 32px 16px; }
.giris-kart { width: 100%; max-width: 440px; background: #fff; border-radius: 18px; padding: 32px 30px; box-shadow: 0 24px 60px rgba(0,0,0,.25); }
.giris-marka { display: flex; align-items: center; gap: 12px; }
.giris-alt { text-align: center; color: rgba(255,255,255,.75); font-size: 12px; padding: 14px; }

/* ---- Kullanıcı çipi ---- */
.kullanici-cip { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--wa-cizgi); }
.avatar.kucuk { width: 26px; height: 26px; font-size: 12px; }

/* ---- Kota ---- */
.kota { min-width: 160px; }

/* ---- Kanal seçimi ---- */
.kanal-secim { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.kanal-kart { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 14px; border: 1px solid var(--wa-cizgi); border-radius: 12px; cursor: pointer; background: #fff; transition: border-color .15s, background .15s; }
.kanal-kart input { position: absolute; opacity: 0; pointer-events: none; }
.kanal-kart i { font-size: 20px; color: var(--wa-teal); }
.kanal-kart.secili { border-color: var(--wa-teal); background: var(--wa-acik); }
.kanal-blok { border: 1px solid var(--wa-cizgi); border-radius: 12px; padding: 14px 16px; background: #fbfdfc; }
.kanal-blok-baslik { font-weight: 600; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }

/* ---- E-posta önizleme ---- */
.eposta-onizleme { background: #fff; border: 1px solid var(--wa-cizgi); border-radius: 14px; overflow: hidden; }
.eposta-onizleme-ust { padding: 12px 16px; border-bottom: 1px solid var(--wa-cizgi); background: #f8faf9; }
.eposta-onizleme iframe { display: block; width: 100%; height: 520px; border: 0; background: #f4f5f7; }
.eposta-onizleme-govde { padding: 16px; font-size: 14px; line-height: 1.6; color: #222; max-height: 360px; overflow-y: auto; overflow-wrap: anywhere; }
.eposta-onizleme-govde p { margin: 0 0 12px; }
.eposta-onizleme-govde .bos { color: #8a948f; }
.eposta-onizleme-govde .ek { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--wa-cizgi); border-radius: 8px; font-size: 13px; background: #f8faf9; }
.eposta-onizleme-alt { padding: 10px 16px 14px; border-top: 1px solid var(--wa-cizgi); font-size: 12px; }

@media (max-width: 767.98px) {
    .kanal-secim { grid-template-columns: 1fr; }
    .eposta-onizleme iframe { height: 380px; }
}

/* ---- Zamanlanmış / otomatik gönderim ---- */
.rozet.mor { background: #efe9fb; color: #5b3fa0; }
.canli-nokta { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #22b573; margin-right: 4px; vertical-align: middle; box-shadow: 0 0 0 0 rgba(34,181,115,.6); animation: canliNabiz 1.8s ease-out infinite; }
@keyframes canliNabiz { 0% { box-shadow: 0 0 0 0 rgba(34,181,115,.55); } 70% { box-shadow: 0 0 0 7px rgba(34,181,115,0); } 100% { box-shadow: 0 0 0 0 rgba(34,181,115,0); } }
@media (prefers-reduced-motion: reduce) { .canli-nokta { animation: none; } }
.gonderim-plani { border-top: 3px solid #7a5bd0; }
.gonderim-plani .wa-card-baslik h2 i { color: #7a5bd0; }
.plan-saat { padding: 10px 14px; border-radius: 12px; background: #f5f1fd; min-width: 180px; }
.plan-satir { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid #f0f3f2; color: inherit; text-decoration: none; }
.plan-satir:last-child { border-bottom: 0; }
.plan-satir:hover { background: #fafcfb; text-decoration: none; }
.plan-ikon { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: #f0eafd; color: #6a4bc0; flex-shrink: 0; }
.plan-ikon.suruyor { background: #ddf8e9; color: #087d58; }

/* UltraMsg kampanya formu */
.kanal-secim.kanal-secim-2 { grid-template-columns: repeat(2, 1fr); }
.wa-balon-gorsel.resimli { height: auto; background: none; padding: 0; }
.wa-balon-gorsel img { width: 100%; max-height: 220px; object-fit: cover; border-radius: 8px; display: block; }
@media (max-width: 767.98px) {
    .kanal-secim.kanal-secim-2 { grid-template-columns: 1fr; }
}

/* Hızlı gönderim */
.adim-no { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--wa-teal); color: #fff; font-size: 13px; margin-right: 6px; vertical-align: 2px; }
.wa-nav a.vurgu { background: var(--wa-yesil); color: #06291d; font-weight: 600; margin: 4px 0; }
.wa-nav a.vurgu:hover, .wa-nav a.vurgu.active { background: #3be27e; color: #06291d; border-left-color: #fff; }

/* Sade menü: bölüm başlıkları */
.wa-nav .nav-baslik { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .09em; color: #7fa89c; padding: 14px 14px 4px; }
.wa-nav a .nav-ek { margin-left: auto; font-size: 10.5px; font-weight: 500; opacity: .6; }
a.wa-mod { text-decoration: none; }
a.wa-mod:hover { filter: brightness(1.15); }

/* Ana sayfa: eylem kartları ve kurulum listesi */
.hosgeldin h2 { font-size: 22px; font-weight: 700; color: #0b3d34; }
.eylemler { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.eylem-kart { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; border-radius: 14px; background: #fff; border: 1px solid var(--wa-cizgi); color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
.eylem-kart i { font-size: 26px; color: var(--wa-teal); margin-bottom: 4px; }
.eylem-kart .baslik { font-weight: 700; font-size: 16px; color: #0b3d34; }
.eylem-kart .aciklama { font-size: 13px; color: #5d6d69; }
.eylem-kart:hover { border-color: var(--wa-teal); box-shadow: 0 6px 18px rgba(18, 140, 126, .12); transform: translateY(-1px); color: inherit; }
.eylem-kart.ana { background: linear-gradient(140deg, #0e7a6c, #1fb85d); border-color: transparent; }
.eylem-kart.ana i, .eylem-kart.ana .baslik, .eylem-kart.ana .aciklama { color: #fff; }
.kurulum-listesi { display: grid; gap: 4px; }
.kurulum-satir { display: flex; align-items: center; gap: 12px; padding: 10px 6px; border-bottom: 1px solid #f0f3f2; color: inherit; text-decoration: none; }
.kurulum-satir:last-child { border-bottom: 0; }
.kurulum-satir:hover { background: #fafcfb; color: inherit; }
.kurulum-satir .durum { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; font-size: 16px; }
.kurulum-satir .durum.tamam { background: #ddf8e9; color: #087d58; }
.kurulum-satir .durum.eksik { background: #fff0c7; color: #8a6200; }
.kurulum-satir .durum.bos { background: #eef1f0; color: #7a8a86; }
.kurulum-satir .eylem { font-size: 13px; color: var(--wa-teal); font-weight: 600; white-space: nowrap; }
@media (max-width: 991.98px) { .eylemler { grid-template-columns: 1fr; } }

/* Firma ayarları: özet şerit ve alt başlıklar */
.ayar-ozet { display: flex; gap: 8px; flex-wrap: wrap; }
.ayar-ozet-kalem { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; text-decoration: none; border: 1px solid transparent; }
.ayar-ozet-kalem.tamam { background: #ddf8e9; color: #087d58; border-color: #b6ebcf; }
.ayar-ozet-kalem.eksik { background: #fff4d6; color: #7a5a00; border-color: #f2d78c; }
.ayar-ozet-kalem.notr { background: #f1f4f3; color: #4d5a57; border-color: #e1e7e5; }
.ayar-alt-baslik { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #5d6d69; margin: 4px 0 10px; }
.smtp-tablo td, .smtp-tablo th { font-size: 12px; padding: 4px 6px; }
.smtp-tablo code { font-size: 11.5px; }
.wa-nav a .nav-rozet { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #25d366; color: #06291d; font-size: 11px; font-weight: 700; display: inline-grid; place-items: center; }