/* =====================================================================
   Sosyal Panel — arayüz stilleri
   ===================================================================== */
:root {
  --vurgu: #f26522;
  --vurgu-acik: color-mix(in srgb, var(--vurgu) 12%, transparent);
  --vurgu-orta: color-mix(in srgb, var(--vurgu) 24%, transparent);
  --zemin: #f5f6f8;
  --kart: #ffffff;
  --kart-2: #fafbfc;
  --cizgi: #e4e7ec;
  --cizgi-guclu: #cfd4dc;
  --yazi: #1d2433;
  --yazi-2: #475467;
  --soluk: #7a8599;
  --basari: #12a150;
  --basari-acik: #e7f7ee;
  --uyari: #d98200;
  --uyari-acik: #fff4e0;
  --hata: #d92d20;
  --hata-acik: #fdecea;
  --bilgi: #2563eb;
  --bilgi-acik: #e8effd;
  --golge: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
  --golge-buyuk: 0 12px 32px rgba(16, 24, 40, .18);
  --yaricap: 10px;
  --yan-genislik: 250px;
  --yazi-tipi: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="acik"]) {
    --zemin: #0f1318; --kart: #171c23; --kart-2: #1c222b; --cizgi: #2a313c; --cizgi-guclu: #3a4350;
    --yazi: #e8ebf0; --yazi-2: #b4bcc9; --soluk: #8993a3;
    --basari-acik: #10301f; --uyari-acik: #33260c; --hata-acik: #3a1614; --bilgi-acik: #14233f;
    --golge: 0 1px 2px rgba(0,0,0,.4); --golge-buyuk: 0 12px 32px rgba(0,0,0,.55);
    color-scheme: dark;
  }
}
:root[data-tema="koyu"] {
  --zemin: #0f1318; --kart: #171c23; --kart-2: #1c222b; --cizgi: #2a313c; --cizgi-guclu: #3a4350;
  --yazi: #e8ebf0; --yazi-2: #b4bcc9; --soluk: #8993a3;
  --basari-acik: #10301f; --uyari-acik: #33260c; --hata-acik: #3a1614; --bilgi-acik: #14233f;
  --golge: 0 1px 2px rgba(0,0,0,.4); --golge-buyuk: 0 12px 32px rgba(0,0,0,.55);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--yazi-tipi); font-size: 14px; line-height: 1.5; color: var(--yazi); background: var(--zemin); -webkit-font-smoothing: antialiased; }
a { color: var(--vurgu); text-decoration: none; }
a:hover { text-decoration: underline; }
svg { width: 18px; height: 18px; flex: none; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; background: var(--kart-2); border: 1px solid var(--cizgi); padding: 1px 5px; border-radius: 5px; word-break: break-all; }
h1, h2, h3, h4 { margin: 0; line-height: 1.25; }
h2 { font-size: 17px; }
h3 { font-size: 15px; }
hr { border: 0; border-top: 1px solid var(--cizgi); margin: 16px 0; }
[hidden] { display: none !important; }
.soluk { color: var(--soluk); }
.kucuk-yazi { font-size: 12.5px; }
.kalin { font-weight: 600; }
.tek-satir { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sag { text-align: right; }
.orta { text-align: center; }
.esnek { display: flex; align-items: center; gap: 8px; }
.esnek.sar { flex-wrap: wrap; }
.esnek.arasi { justify-content: space-between; }
.bosluk { flex: 1; }
.dikey { display: flex; flex-direction: column; gap: 12px; }
.izgara-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.izgara-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.izgara-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.mt { margin-top: 16px; } .mt-k { margin-top: 8px; } .mb { margin-bottom: 16px; } .mb-k { margin-bottom: 8px; }

/* ----- Kabuk ----- */
.kabuk { display: flex; min-height: 100vh; }
.yan { width: var(--yan-genislik); background: var(--kart); border-right: 1px solid var(--cizgi); display: flex; flex-direction: column; position: fixed; top: 0; bottom: 0; left: 0; z-index: 40; }
.yan-ust { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 8px; }
.logo { display: flex; align-items: center; gap: 10px; color: var(--yazi); font-weight: 700; font-size: 16px; }
.logo:hover { text-decoration: none; }
.logo-isaret { width: 32px; height: 32px; border-radius: 9px; background: var(--vurgu); color: #fff; display: grid; place-items: center; }
.logo-isaret svg { width: 26px; height: 26px; }
.logo-isaret.buyuk { width: 52px; height: 52px; border-radius: 14px; }
.logo-isaret.buyuk svg { width: 40px; height: 40px; }
.menu { padding: 8px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; flex: 1; }
.menu-oge { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 8px; color: var(--yazi-2); font-weight: 500; }
.menu-oge:hover { background: var(--kart-2); color: var(--yazi); text-decoration: none; }
.menu-oge.aktif { background: var(--vurgu-acik); color: var(--vurgu); }
.menu-oge span { flex: 1; }
.menu-rozet { background: var(--hata); color: #fff; font-size: 11px; min-width: 20px; height: 20px; border-radius: 10px; display: grid; place-items: center; padding: 0 6px; }
.menu-rozet[data-rozet="elle"] { background: var(--uyari); }
.yan-alt { padding: 8px 8px 14px; border-top: 1px solid var(--cizgi); }
.durum-satiri { display: flex; align-items: center; gap: 6px; padding: 8px 12px 2px; font-size: 12px; color: var(--soluk); }
.durum-satiri span:not(.durum-nokta) { margin-right: 8px; }
.durum-nokta { width: 8px; height: 8px; border-radius: 50%; background: var(--cizgi-guclu); display: inline-block; }
.durum-nokta.iyi { background: var(--basari); box-shadow: 0 0 0 3px var(--basari-acik); }
.durum-nokta.kotu { background: var(--hata); box-shadow: 0 0 0 3px var(--hata-acik); }
.surum { font-size: 11px; color: var(--soluk); padding: 2px 12px; }
.yan-kapat, .menu-ac { display: none; }
.yan-ortu { display: none; }
.icerik { flex: 1; margin-left: var(--yan-genislik); min-width: 0; }
.ust { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px; padding: 12px 24px; background: color-mix(in srgb, var(--zemin) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--cizgi); }
.sayfa-baslik { font-size: 19px; font-weight: 700; flex: 1; }
.ust-sag { display: flex; align-items: center; gap: 8px; }
.cikis-form { margin: 0; }
.sayfa { padding: 20px 24px 60px; max-width: 1500px; }

/* ----- Kart ----- */
.kart { background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--yaricap); box-shadow: var(--golge); }
.kart-ic { padding: 18px; }
.kart-baslik { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--cizgi); }
.kart-baslik h2, .kart-baslik h3 { flex: 1; }
.bolum { margin-bottom: 18px; }

/* ----- Düğmeler ----- */
.dugme { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--cizgi-guclu); background: var(--kart); color: var(--yazi); font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .12s, border-color .12s, box-shadow .12s; }
.dugme:hover { background: var(--kart-2); text-decoration: none; }
.dugme:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 1px; }
.dugme:disabled { opacity: .55; cursor: not-allowed; }
.dugme.birincil { background: var(--vurgu); border-color: var(--vurgu); color: #fff; }
.dugme.birincil:hover { filter: brightness(1.06); }
.dugme.tehlike { color: var(--hata); }
.dugme.tehlike.dolu { background: var(--hata); border-color: var(--hata); color: #fff; }
.dugme.basari { background: var(--basari); border-color: var(--basari); color: #fff; }
.dugme.hayalet { border-color: transparent; background: transparent; }
.dugme.hayalet:hover { background: var(--kart-2); }
.dugme.kucuk { height: 30px; padding: 0 10px; font-size: 13px; }
.dugme.genis { width: 100%; height: 42px; }
.dugme svg { width: 17px; height: 17px; }
.dugme.yukleniyor { position: relative; color: transparent !important; pointer-events: none; }
.dugme.yukleniyor::after { content: ""; position: absolute; width: 16px; height: 16px; border: 2px solid currentColor; border-color: var(--yazi-2) transparent var(--yazi-2) transparent; border-radius: 50%; animation: don .8s linear infinite; }
.dugme.birincil.yukleniyor::after { border-color: #fff transparent #fff transparent; }
.ikon-dugme { display: inline-grid; place-items: center; width: 34px; height: 34px; border: 0; background: transparent; color: var(--yazi-2); border-radius: 8px; cursor: pointer; }
.ikon-dugme:hover { background: var(--kart-2); color: var(--yazi); }
.dugme-grubu { display: inline-flex; }
.dugme-grubu .dugme { border-radius: 0; margin-left: -1px; }
.dugme-grubu .dugme:first-child { border-radius: 8px 0 0 8px; margin-left: 0; }
.dugme-grubu .dugme:last-child { border-radius: 0 8px 8px 0; }
.dugme-grubu .dugme.secili { background: var(--vurgu-acik); color: var(--vurgu); border-color: var(--vurgu); z-index: 1; }
@keyframes don { to { transform: rotate(360deg); } }

/* ----- Form ----- */
.alan { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.alan > span { font-weight: 600; font-size: 13px; color: var(--yazi-2); }
.alan small { font-weight: 400; }
.yardim { font-size: 12.5px; color: var(--soluk); margin-top: -2px; }
input[type=text], input[type=password], input[type=number], input[type=date], input[type=time], input[type=url], input[type=email], input:not([type]), select, textarea {
  width: 100%; height: 38px; padding: 0 11px; border: 1px solid var(--cizgi-guclu); border-radius: 8px; background: var(--kart); color: var(--yazi); font: inherit;
}
textarea { height: auto; min-height: 90px; padding: 9px 11px; resize: vertical; line-height: 1.5; }
input::placeholder, textarea::placeholder { color: var(--soluk); }
select { padding-right: 28px; }
.onay { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; font-weight: 500; }
.onay input { width: 17px; height: 17px; accent-color: var(--vurgu); margin: 0; }
.anahtar { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.anahtar input { position: absolute; opacity: 0; pointer-events: none; }
.anahtar i { width: 38px; height: 22px; border-radius: 11px; background: var(--cizgi-guclu); position: relative; transition: background .15s; flex: none; }
.anahtar i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.anahtar input:checked + i { background: var(--vurgu); }
.anahtar input:checked + i::after { transform: translateX(16px); }
.anahtar input:focus-visible + i { outline: 2px solid var(--vurgu); outline-offset: 2px; }
.sayac { font-size: 12px; color: var(--soluk); text-align: right; }
.sayac.asim { color: var(--hata); font-weight: 600; }

/* ----- Rozet / çip ----- */
.rozet { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 11px; font-size: 12px; font-weight: 600; background: var(--kart-2); color: var(--yazi-2); border: 1px solid var(--cizgi); white-space: nowrap; }
.rozet.basari, .rozet.d-yayinlandi, .rozet.d-elle_tamam, .rozet.d-tamamlandi { background: var(--basari-acik); color: var(--basari); border-color: transparent; }
.rozet.uyari, .rozet.d-elle_bekliyor, .rozet.d-kismen, .rozet.d-kuyrukta { background: var(--uyari-acik); color: var(--uyari); border-color: transparent; }
.rozet.hata, .rozet.d-hata { background: var(--hata-acik); color: var(--hata); border-color: transparent; }
.rozet.bilgi, .rozet.d-postizde, .rozet.d-planlandi { background: var(--bilgi-acik); color: var(--bilgi); border-color: transparent; }
.rozet.d-iptal, .rozet.d-atlandi { text-decoration: line-through; }
.cip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px 0 3px; border-radius: 13px; background: var(--kart-2); border: 1px solid var(--cizgi); font-size: 12.5px; font-weight: 500; max-width: 100%; }
.cip .p-isaret { width: 20px; height: 20px; font-size: 10px; }
.p-isaret { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: #fff; font-weight: 700; font-size: 11px; flex: none; text-transform: none; letter-spacing: -.3px; position: relative; }
.p-isaret .durum-mini { position: absolute; right: -2px; bottom: -2px; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--kart); }
.hedef-noktalar { display: flex; flex-wrap: wrap; gap: 4px; }
td > .hedef-noktalar { min-width: 128px; max-width: 160px; }
.hedef-noktalar .p-isaret { width: 22px; height: 22px; font-size: 10px; cursor: default; }
.hedef-noktalar .p-isaret.kapali { opacity: .25; }
.dm-yayinlandi, .dm-elle_tamam { background: var(--basari); }
.dm-postizde, .dm-kuyrukta { background: var(--bilgi); }
.dm-elle_bekliyor { background: var(--uyari); }
.dm-hata { background: var(--hata); }
.dm-taslak { background: var(--cizgi-guclu); }
.dm-iptal, .dm-atlandi { background: var(--soluk); }

/* ----- Uyarı kutuları ----- */
.uyari-kutu { padding: 11px 14px; border-radius: 9px; border: 1px solid var(--cizgi); background: var(--kart-2); display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; }
.uyari-kutu svg { margin-top: 1px; }
.uyari-kutu.hata { background: var(--hata-acik); border-color: color-mix(in srgb, var(--hata) 30%, transparent); color: var(--hata); }
.uyari-kutu.uyari { background: var(--uyari-acik); border-color: color-mix(in srgb, var(--uyari) 30%, transparent); color: color-mix(in srgb, var(--uyari) 80%, var(--yazi)); }
.uyari-kutu.basari { background: var(--basari-acik); border-color: color-mix(in srgb, var(--basari) 30%, transparent); color: var(--basari); }
.uyari-kutu.bilgi { background: var(--bilgi-acik); border-color: color-mix(in srgb, var(--bilgi) 25%, transparent); color: color-mix(in srgb, var(--bilgi) 80%, var(--yazi)); }
.uyari-kutu > div { flex: 1; }
.uyari-kutu ul { margin: 6px 0 0; padding-left: 18px; }

/* ----- Tablo ----- */
.tablo-kap { overflow-x: auto; border: 1px solid var(--cizgi); border-radius: var(--yaricap); background: var(--kart); }
table.tablo { width: 100%; border-collapse: separate; border-spacing: 0; }
.tablo th { position: sticky; top: 0; background: var(--kart-2); font-size: 12px; text-transform: uppercase; letter-spacing: .3px; color: var(--soluk); font-weight: 600; text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--cizgi); white-space: nowrap; z-index: 1; }
.tablo td { padding: 10px 12px; border-bottom: 1px solid var(--cizgi); vertical-align: top; }
.tablo tr:last-child td { border-bottom: 0; }
.tablo tbody tr:hover td { background: color-mix(in srgb, var(--vurgu) 3%, var(--kart)); }
.tablo tr.secili td { background: var(--vurgu-acik) !important; }
.tablo .dar { width: 1%; white-space: nowrap; }
.tablo input.satir-ici, .tablo textarea.satir-ici { border-color: transparent; background: transparent; height: 32px; padding: 0 6px; }
.tablo input.satir-ici:hover, .tablo textarea.satir-ici:hover { border-color: var(--cizgi); }
.tablo input.satir-ici:focus, .tablo textarea.satir-ici:focus { border-color: var(--vurgu); background: var(--kart); }
.kucuk-resim { width: 64px; height: 48px; border-radius: 6px; object-fit: cover; background: var(--kart-2); display: block; border: 1px solid var(--cizgi); }
.kucuk-resim-kap { position: relative; display: inline-block; }
.kucuk-resim-kap .adet { position: absolute; right: 3px; bottom: 3px; background: rgba(0,0,0,.7); color: #fff; font-size: 10px; border-radius: 4px; padding: 0 4px; }
.kucuk-resim-kap .tur { position: absolute; left: 3px; top: 3px; background: rgba(0,0,0,.65); color: #fff; border-radius: 4px; width: 16px; height: 16px; display: grid; place-items: center; }
.kucuk-resim-kap .tur svg { width: 11px; height: 11px; }
.metin-onizleme { max-width: 420px; color: var(--yazi-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; cursor: pointer; }
.sayfalama { display: flex; align-items: center; gap: 8px; justify-content: flex-end; padding: 10px 0; }

/* ----- Araç çubuğu / filtre ----- */
.arac-cubugu { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.arac-cubugu select, .arac-cubugu input:not([type=checkbox]):not([type=radio]) { width: auto; min-width: 140px; height: 36px; }
.arac-cubugu .ara { position: relative; }
.arac-cubugu .ara svg { position: absolute; left: 10px; top: 9px; color: var(--soluk); }
.arac-cubugu .ara input { padding-left: 32px; min-width: 220px; }
.secim-cubugu { position: sticky; top: 61px; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px; margin-bottom: 12px; background: var(--kart); border: 1px solid var(--vurgu); border-radius: var(--yaricap); box-shadow: var(--golge-buyuk); }

/* ----- KPI ----- */
.kpi { padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.kpi b { font-size: 26px; line-height: 1.1; }
.kpi span { color: var(--soluk); font-size: 13px; }
.kpi.vurgulu b { color: var(--vurgu); }
.kpi.kirmizi b { color: var(--hata); }
.kpi.sari b { color: var(--uyari); }

/* ----- Liste satırı ----- */
.liste-satir { display: flex; align-items: center; gap: 12px; padding: 10px 18px; border-bottom: 1px solid var(--cizgi); }
.liste-satir:last-child { border-bottom: 0; }
.liste-satir .kucuk-resim { width: 48px; height: 36px; }
.liste-satir .ana { flex: 1; min-width: 0; }
.liste-satir .ana b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bos-durum { padding: 36px 18px; text-align: center; color: var(--soluk); }
.bos-durum svg { width: 36px; height: 36px; margin-bottom: 8px; opacity: .6; }

/* ----- Sekmeler ----- */
.sekmeler { display: flex; gap: 4px; border-bottom: 1px solid var(--cizgi); margin-bottom: 18px; overflow-x: auto; }
.sekme { padding: 10px 14px; border: 0; background: none; font: inherit; font-weight: 600; color: var(--soluk); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.sekme:hover { color: var(--yazi); }
.sekme.aktif { color: var(--vurgu); border-bottom-color: var(--vurgu); }

/* ----- Adımlar (sihirbaz) ----- */
.adimlar { display: flex; gap: 6px; margin-bottom: 18px; flex-wrap: wrap; }
.adim-baslik { display: flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; border-radius: 20px; background: var(--kart); border: 1px solid var(--cizgi); color: var(--soluk); font-weight: 600; cursor: pointer; }
.adim-baslik b { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--kart-2); border: 1px solid var(--cizgi); font-size: 12px; }
.adim-baslik.aktif { color: var(--vurgu); border-color: var(--vurgu); background: var(--vurgu-acik); }
.adim-baslik.aktif b { background: var(--vurgu); color: #fff; border-color: var(--vurgu); }
.adim-baslik.tamam b { background: var(--basari); color: #fff; border-color: var(--basari); }
.adim { display: none; }
.adim.aktif { display: block; }
.adim-alt { display: flex; justify-content: space-between; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--cizgi); }

/* ----- Yükleme alanı ----- */
.birak-alani { border: 2px dashed var(--cizgi-guclu); border-radius: 14px; padding: 34px 20px; text-align: center; background: var(--kart); transition: border-color .15s, background .15s; cursor: pointer; }
.birak-alani:hover, .birak-alani.uzerinde { border-color: var(--vurgu); background: var(--vurgu-acik); }
.birak-alani > svg { width: 42px; height: 42px; color: var(--vurgu); }
.birak-alani h3 { margin: 8px 0 4px; font-size: 16px; }
.dosya-listesi { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.dosya-satir { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--cizgi); border-radius: 9px; background: var(--kart); }
.dosya-satir .kucuk-resim { width: 56px; height: 42px; }
.dosya-satir .ana { flex: 1; min-width: 0; }
.dosya-satir .ana b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.ilerleme { height: 6px; border-radius: 3px; background: var(--kart-2); overflow: hidden; margin-top: 5px; border: 1px solid var(--cizgi); }
.ilerleme i { display: block; height: 100%; background: var(--vurgu); width: 0; transition: width .2s; }
.ilerleme.bitti i { background: var(--basari); }
.ilerleme.hata i { background: var(--hata); }
.grup-baslik { font-weight: 700; font-size: 12px; color: var(--soluk); text-transform: uppercase; letter-spacing: .4px; margin: 14px 0 6px; }

/* ----- Kanal seçim kartları ----- */
.kanal-secim { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.kanal-kart { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border: 1.5px solid var(--cizgi); border-radius: 11px; background: var(--kart); cursor: pointer; position: relative; user-select: none; }
.kanal-kart:hover { border-color: var(--cizgi-guclu); }
.kanal-kart.secili { border-color: var(--vurgu); background: var(--vurgu-acik); }
.kanal-kart input { position: absolute; opacity: 0; pointer-events: none; }
.kanal-kart .p-isaret { width: 34px; height: 34px; font-size: 13px; }
.kanal-kart .ana { flex: 1; min-width: 0; }
.kanal-kart .ana b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kanal-kart .isaret-tik { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--cizgi-guclu); display: grid; place-items: center; color: transparent; }
.kanal-kart.secili .isaret-tik { background: var(--vurgu); border-color: var(--vurgu); color: #fff; }
.kanal-kart .isaret-tik svg { width: 14px; height: 14px; }
.kanal-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }

/* ----- Saat çipleri ----- */
.cip-giris { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 5px; border: 1px solid var(--cizgi-guclu); border-radius: 8px; background: var(--kart); min-height: 38px; }
.cip-giris .cip { padding: 0 4px 0 10px; }
.cip-giris .cip button { border: 0; background: none; color: var(--soluk); cursor: pointer; padding: 0 3px; font-size: 16px; line-height: 1; }
.cip-giris input { border: 0 !important; height: 28px !important; width: 110px !important; padding: 0 4px !important; background: transparent; }
.gun-secici { display: flex; gap: 5px; flex-wrap: wrap; }
.gun-secici label { display: inline-grid; place-items: center; min-width: 46px; height: 34px; padding: 0 8px; border: 1px solid var(--cizgi-guclu); border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 13px; }
.gun-secici input { display: none; }
.gun-secici input:checked + span { color: var(--vurgu); }
.gun-secici label:has(input:checked) { border-color: var(--vurgu); background: var(--vurgu-acik); color: var(--vurgu); }

/* ----- Şablon editörü ----- */
.degisken-dugmeleri { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0 4px; }
.degisken-dugmeleri button { border: 1px solid var(--cizgi); background: var(--kart-2); border-radius: 6px; padding: 3px 8px; font: inherit; font-size: 12.5px; cursor: pointer; color: var(--yazi-2); }
.degisken-dugmeleri button:hover { border-color: var(--vurgu); color: var(--vurgu); }
.degisken-dugmeleri button.hashtag { color: var(--bilgi); }
.onizleme-kutu { white-space: pre-wrap; word-break: break-word; background: var(--kart-2); border: 1px solid var(--cizgi); border-radius: 9px; padding: 12px 14px; font-size: 13.5px; }
.platform-onizleme { border: 1px solid var(--cizgi); border-radius: 10px; overflow: hidden; background: var(--kart); }
.platform-onizleme header { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--kart-2); border-bottom: 1px solid var(--cizgi); font-weight: 600; font-size: 13px; }
.platform-onizleme .govde { padding: 10px 12px; white-space: pre-wrap; word-break: break-word; font-size: 13px; max-height: 220px; overflow: auto; }
.platform-onizleme footer { padding: 6px 12px; border-top: 1px solid var(--cizgi); font-size: 12px; }

/* ----- Takvim ----- */
.takvim { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--cizgi); border-radius: var(--yaricap); overflow: hidden; background: var(--cizgi); gap: 1px; }
.takvim-gun-adi { background: var(--kart-2); padding: 8px; font-size: 12px; font-weight: 700; color: var(--soluk); text-align: center; text-transform: uppercase; }
.takvim-gun { background: var(--kart); min-height: 118px; padding: 6px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.takvim-gun.diger-ay { background: var(--kart-2); }
.takvim-gun.diger-ay .gun-no { color: var(--soluk); }
.takvim-gun.bugun .gun-no { background: var(--vurgu); color: #fff; }
.gun-no { font-size: 12px; font-weight: 700; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; }
.takvim-olay { display: flex; align-items: center; gap: 5px; font-size: 11.5px; padding: 3px 5px; border-radius: 6px; background: var(--kart-2); border-left: 3px solid var(--cizgi-guclu); cursor: pointer; overflow: hidden; min-width: 0; }
.takvim-olay:hover { background: var(--vurgu-acik); }
.takvim-olay .p-isaret { width: 16px; height: 16px; font-size: 8px; }
.takvim-olay span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.takvim-olay.d-yayinlandi, .takvim-olay.d-elle_tamam { border-left-color: var(--basari); }
.takvim-olay.d-postizde, .takvim-olay.d-kuyrukta { border-left-color: var(--bilgi); }
.takvim-olay.d-elle_bekliyor { border-left-color: var(--uyari); }
.takvim-olay.d-hata { border-left-color: var(--hata); }
.takvim-olay.postiz { opacity: .75; font-style: italic; }
.takvim-fazla { font-size: 11.5px; color: var(--vurgu); cursor: pointer; padding-left: 5px; font-weight: 600; }
.takvim-olay.grup { flex-direction: column; align-items: stretch; gap: 3px; }
.takvim-olay.grup > span { display: block; }
.mini-noktalar { display: flex; flex-wrap: wrap; gap: 2px; }
.mini-noktalar .p-isaret { width: 16px; height: 16px; font-size: 7px; letter-spacing: -.4px; border: 0; }
.mini-noktalar .p-isaret.kapali { opacity: .3; }
.mini-noktalar .fazla { font-size: 10px; color: var(--soluk); line-height: 16px; }

/* ----- Medya ızgarası ----- */
.medya-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.medya-kart { border: 1px solid var(--cizgi); border-radius: 10px; overflow: hidden; background: var(--kart); position: relative; cursor: pointer; }
.medya-kart.secili { outline: 2.5px solid var(--vurgu); outline-offset: -1px; }
.medya-kart img { width: 100%; height: 118px; object-fit: cover; display: block; background: var(--kart-2); }
.medya-kart .bilgi { padding: 8px 10px; font-size: 12px; }
.medya-kart .bilgi b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
.medya-kart .secim { position: absolute; top: 7px; left: 7px; width: 22px; height: 22px; border-radius: 6px; background: rgba(255,255,255,.92); border: 1.5px solid var(--cizgi-guclu); display: grid; place-items: center; color: transparent; }
.medya-kart.secili .secim { background: var(--vurgu); border-color: var(--vurgu); color: #fff; }
.medya-kart .secim svg { width: 14px; height: 14px; }
.medya-kart .ust-bilgi { position: absolute; top: 7px; right: 7px; display: flex; gap: 4px; }
.medya-kart .ust-bilgi span { background: rgba(0,0,0,.7); color: #fff; font-size: 11px; border-radius: 5px; padding: 1px 6px; }

/* ----- Pencere (modal) ----- */
.pencere-ortu { position: fixed; inset: 0; background: rgba(15, 20, 30, .55); z-index: 100; display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto; animation: belir .12s ease-out; }
.pencere { background: var(--kart); border-radius: 14px; box-shadow: var(--golge-buyuk); width: 100%; max-width: 560px; display: flex; flex-direction: column; animation: yuksel .15s ease-out; }
.pencere.genis { max-width: 980px; }
.pencere.orta { max-width: 740px; }
.pencere-baslik { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--cizgi); }
.pencere-baslik h2 { flex: 1; }
.pencere-govde { padding: 18px 20px; }
.pencere-alt { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--cizgi); background: var(--kart-2); border-radius: 0 0 14px 14px; flex-wrap: wrap; }
@keyframes belir { from { opacity: 0; } }
@keyframes yuksel { from { transform: translateY(10px); opacity: .6; } }

/* ----- Bildirim (toast) ----- */
.bildirimler { position: fixed; right: 16px; bottom: 16px; z-index: 200; display: flex; flex-direction: column; gap: 8px; max-width: min(420px, calc(100vw - 32px)); }
.bildirim { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 10px; background: var(--yazi); color: var(--kart); box-shadow: var(--golge-buyuk); animation: yuksel .15s ease-out; font-weight: 500; }
.bildirim.hata { background: var(--hata); color: #fff; }
.bildirim.basari { background: var(--basari); color: #fff; }
.bildirim.uyari { background: var(--uyari); color: #fff; }
.bildirim div { flex: 1; white-space: pre-line; }
.bildirim button { background: none; border: 0; color: inherit; opacity: .8; cursor: pointer; font-size: 18px; line-height: 1; }

/* ----- Akordeon / rehber ----- */
details.akordeon { border: 1px solid var(--cizgi); border-radius: 10px; background: var(--kart); margin-bottom: 8px; }
details.akordeon > summary { list-style: none; cursor: pointer; padding: 12px 16px; display: flex; align-items: center; gap: 10px; font-weight: 600; }
details.akordeon > summary::-webkit-details-marker { display: none; }
details.akordeon > summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--soluk); border-bottom: 2px solid var(--soluk); transform: rotate(45deg); margin-left: auto; transition: transform .15s; }
details.akordeon[open] > summary::after { transform: rotate(225deg); }
details.akordeon > .akordeon-ic { padding: 0 16px 16px; }
ol.rehber { margin: 8px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
ol.rehber li { padding-left: 4px; }

/* ----- Giriş sayfası ----- */
.giris-sayfasi { min-height: 100vh; display: grid; place-items: center; padding: 20px; background: radial-gradient(circle at 20% 10%, var(--vurgu-acik), transparent 40%), var(--zemin); }
.giris-kutu { width: 100%; max-width: 380px; padding: 28px; }
.giris-logo { text-align: center; margin-bottom: 20px; }
.giris-logo .logo-isaret { margin: 0 auto 10px; }
.giris-logo h1 { font-size: 22px; }

/* ----- Gönderi ayrıntı penceresi ----- */
.detay-duzen { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 20px; }
.detay-medya { display: flex; flex-direction: column; gap: 8px; }
.detay-medya video, .detay-medya img { width: 100%; border-radius: 10px; background: #000; max-height: 380px; object-fit: contain; }
.hedef-kart { border: 1px solid var(--cizgi); border-radius: 10px; margin-bottom: 10px; background: var(--kart); }
.hedef-kart > header { display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; }
.hedef-kart > header .ana { flex: 1; min-width: 0; }
.hedef-kart > header .ana b { display: block; }
.hedef-kart .hedef-ic { padding: 0 12px 12px; border-top: 1px solid var(--cizgi); display: none; }
.hedef-kart.acik .hedef-ic { display: block; padding-top: 12px; }
.hedef-kart.kapali-hedef { opacity: .65; }

/* ----- Duyarlı ----- */
@media (max-width: 1100px) {
  .izgara-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .izgara-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detay-duzen { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .yan { transform: translateX(-100%); transition: transform .2s; box-shadow: var(--golge-buyuk); }
  .yan.acik { transform: none; }
  .yan-ortu { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 35; opacity: 0; pointer-events: none; transition: opacity .2s; }
  .yan.acik ~ .yan-ortu { opacity: 1; pointer-events: auto; }
  .yan-kapat, .menu-ac { display: inline-grid; }
  .icerik { margin-left: 0; }
  .ust { padding: 10px 14px; }
  .sayfa { padding: 14px 14px 60px; }
  .izgara-2, .izgara-3 { grid-template-columns: minmax(0, 1fr); }
  .gizle-mobil { display: none; }
  .takvim-gun { min-height: 76px; }
  .takvim-olay span, .takvim-olay.grup > span { display: none; }
  .secim-cubugu { top: 57px; }
  .pencere-ortu { padding: 0; }
  .pencere { border-radius: 0; min-height: 100vh; }
}
@media (max-width: 520px) {
  .izgara-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .arac-cubugu select, .arac-cubugu input:not([type=checkbox]):not([type=radio]), .arac-cubugu .ara input { min-width: 0; width: 100%; }
  .arac-cubugu > * { flex: 1 1 100%; }
}