/* ═══════════════════════════════════════════════════════════════════
   MUSTERI PANELI KABUGU (panel.etesio.com) — Enver, 16 Eki 2026:
   "panel.dropshipping.gen.tr gibi olsun, cok basit olmasin, bize gore uyarla;
   logo ve faviconlarimizi da ayarla."

   dropshipping'in PanelLayout duzeni: 260px yan menu (60px'e daralir,
   Ctrl+B), gruplu menu, 56px ust cubuk (cam efekti), zil + tema + profil
   menusu, telefonda cekmece + ortu. Renkler Etesio kimligi: #0070f3,
   #015798, #00ccff. Ekran icerikleri (pano, dugme, alan) panel.css'ten gelir.
   ═══════════════════════════════════════════════════════════════════ */
.mp {
  --mp-ana: #0070f3;
  --mp-ana-koyu: #015798;
  --mp-vurgu: #00ccff;
  --mp-zemin: #f5f7fb;
  --mp-yan: #ffffff;
  --mp-kart: #ffffff;
  --mp-kenar: #e4e8f0;
  --mp-metin: #0f172a;
  --mp-metin-2: #475569;
  --mp-metin-3: #64748b;
  --mp-hover: #f1f5f9;
  --mp-aktif: color-mix(in srgb, var(--mp-ana) 10%, transparent);
  --mp-golge: 0 10px 30px rgba(15, 23, 42, .12);
  /* panel.css ekranlari bu degiskenleri okur: kabukla ayni tonda kalsinlar */
  --ana: var(--mp-ana);
  --ana-koyu: var(--mp-ana-koyu);
  --zemin: var(--mp-zemin);
  --zemin-2: var(--mp-hover);
  --kart: var(--mp-kart);
  --kenar: var(--mp-kenar);
  --metin: var(--mp-metin);
  --metin-2: var(--mp-metin-2);
  --metin-3: var(--mp-metin-3);
  margin: 0; background: var(--mp-zemin); color: var(--mp-metin);
  font-family: "Poppins", var(--yazi-govde, system-ui), sans-serif;
}
:root[data-tema="koyu"] .mp {
  --mp-zemin: #0b1120; --mp-yan: #0f172a; --mp-kart: #111a2e; --mp-kenar: #1f2a44;
  --mp-metin: #e2e8f0; --mp-metin-2: #b6c2d4; --mp-metin-3: #94a3b8; --mp-hover: #17223a;
  --mp-aktif: color-mix(in srgb, var(--mp-vurgu) 14%, transparent);
  --mp-golge: 0 12px 34px rgba(0, 0, 0, .45);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="acik"]) .mp {
    --mp-zemin: #0b1120; --mp-yan: #0f172a; --mp-kart: #111a2e; --mp-kenar: #1f2a44;
    --mp-metin: #e2e8f0; --mp-metin-2: #b6c2d4; --mp-metin-3: #94a3b8; --mp-hover: #17223a;
    --mp-aktif: color-mix(in srgb, var(--mp-vurgu) 14%, transparent);
    --mp-golge: 0 12px 34px rgba(0, 0, 0, .45);
  }
}

.mp-kabuk { display: flex; height: 100vh; height: 100dvh; overflow: hidden; }

/* ── Yan menu ─────────────────────────────────────── */
.mp-yan {
  width: 260px; flex: none; display: flex; flex-direction: column;
  background: var(--mp-yan); border-right: 1px solid var(--mp-kenar);
  transition: width .2s ease; overflow: hidden; z-index: 40;
}
.mp-logo {
  height: 56px; flex: none; display: flex; align-items: center; padding: 0 1rem;
  border-bottom: 1px solid var(--mp-kenar); text-decoration: none;
}
.mp-logo img { display: block; }
.mp-logo-genis img { height: 36px; width: auto; max-width: 200px; object-fit: contain; }
.mp-logo-simge { display: none; }
.mp-logo-simge img { width: 30px; height: 30px; border-radius: 8px; object-fit: contain; }
.mp-logo .marka-logo-koyu { display: none; }
:root[data-tema="koyu"] .mp-logo .marka-logo-acik { display: none; }
:root[data-tema="koyu"] .mp-logo .marka-logo-koyu { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="acik"]) .mp-logo .marka-logo-acik { display: none; }
  :root:not([data-tema="acik"]) .mp-logo .marka-logo-koyu { display: block; }
}

.mp-menu { flex: 1; overflow-y: auto; padding: .75rem .625rem; display: flex; flex-direction: column; gap: 2px; scrollbar-width: thin; }
.mp-menu a {
  display: flex; align-items: center; gap: .7rem; height: 38px; padding: 0 .7rem;
  border-radius: 9px; color: var(--mp-metin-2); text-decoration: none;
  font-size: .86rem; font-weight: 500; white-space: nowrap; position: relative;
  transition: background .15s ease, color .15s ease;
}
.mp-menu a svg { width: 18px; height: 18px; flex: none; }
.mp-menu a:hover { background: var(--mp-hover); color: var(--mp-metin); }
.mp-menu a[aria-current="page"] { background: var(--mp-aktif); color: var(--mp-ana); font-weight: 600; }
:root[data-tema="koyu"] .mp-menu a[aria-current="page"] { color: var(--mp-vurgu); }
.mp-menu a[aria-current="page"]::before {
  content: ""; position: absolute; left: -.625rem; top: 8px; bottom: 8px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--mp-ana);
}
.mp-menu .mp-sayac {
  margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: #ef4444; color: #fff; font-size: .7rem; font-weight: 600; display: inline-grid; place-items: center;
}
/* Uygulama grubu (20 Eki 2026): satin alinan her uygulama menude acilir bir grup;
   alt ogeler yonetim ekranlari ve paketteki ozellikler (kilitli olan soluk). */
.mp-uyg-tepe {
  display: flex; align-items: center; gap: .7rem; width: 100%; height: 38px; padding: 0 .7rem;
  border: 0; background: none; border-radius: 9px; color: var(--mp-metin-2); cursor: pointer;
  font: inherit; font-size: .86rem; font-weight: 600; white-space: nowrap; text-align: left;
}
.mp-uyg-tepe:hover { background: var(--mp-hover); color: var(--mp-metin); }
.mp-uyg-tepe svg { width: 18px; height: 18px; flex: none; }
.mp-uyg-tepe span { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.mp-uyg-tepe .mp-uyg-ok { width: 14px; height: 14px; transition: transform .15s; }
.mp-uyg-grup.acik .mp-uyg-ok { transform: rotate(90deg); }
.mp-uyg-alt { display: none; flex-direction: column; gap: 1px; padding-left: 1.6rem; }
.mp-uyg-grup.acik .mp-uyg-alt { display: flex; }
.mp-menu .mp-uyg-alt a { height: 32px; font-size: .82rem; }
.mp-menu .mp-uyg-alt a svg { width: 14px; height: 14px; margin-left: auto; opacity: .6; }
.mp-menu .mp-uyg-alt a.kilitli { opacity: .55; }
.mp-uyg-ozellik { display: flex; flex-direction: column; gap: 1px; }
.mp-uyg-baslik { margin: .5rem .7rem .2rem; font-size: .64rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mp-metin-3); }
.mp-grup {
  margin: .9rem .7rem .35rem; font-size: .68rem; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--mp-metin-3); white-space: nowrap;
}
.mp-yan-alt {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .7rem .9rem; border-top: 1px solid var(--mp-kenar);
}
.mp-imza { height: 26px; width: auto; opacity: .7; }
:root[data-tema="koyu"] .mp-imza { filter: invert(1); opacity: .45; }
.mp-surum {
  border: 1px solid var(--mp-kenar); background: transparent; color: var(--mp-metin-3);
  border-radius: 999px; padding: .2rem .6rem; font: 600 .7rem ui-monospace, SFMono-Regular, Consolas, monospace; cursor: pointer;
}
.mp-surum:hover { color: var(--mp-ana); border-color: var(--mp-ana); }

/* Daraltilmis yan menu (masaustu) */
@media (min-width: 1024px) {
  .mp-dar .mp-yan { width: 60px; }
  .mp-dar .mp-logo { justify-content: center; padding: 0; }
  .mp-dar .mp-logo-genis { display: none; }
  .mp-dar .mp-logo-simge { display: block; }
  .mp-dar .mp-menu { padding: .75rem .5rem; }
  .mp-dar .mp-menu a { justify-content: center; padding: 0; }
  .mp-dar .mp-menu a span, .mp-dar .mp-menu .mp-sayac { display: none; }
  .mp-dar .mp-uyg-tepe { justify-content: center; padding: 0; }
  .mp-dar .mp-uyg-tepe span, .mp-dar .mp-uyg-tepe .mp-uyg-ok, .mp-dar .mp-uyg-alt { display: none; }
  .mp-dar .mp-menu a[aria-current="page"]::before { left: -.5rem; }
  .mp-dar .mp-grup { height: 1px; margin: .6rem .4rem; overflow: hidden; color: transparent; background: var(--mp-kenar); }
  .mp-dar .mp-yan-alt { justify-content: center; padding: .6rem .3rem; }
  .mp-dar .mp-imza { display: none; }
  .mp-dar .mp-surum { padding: .2rem .35rem; font-size: .62rem; }
}

/* ── Ana alan ve ust cubuk ───────────────────────── */
.mp-ana { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.mp-ust {
  height: 56px; flex: none; display: flex; align-items: center; gap: .6rem; padding: 0 1rem;
  background: color-mix(in srgb, var(--mp-kart) 82%, transparent);
  backdrop-filter: saturate(160%) blur(10px); -webkit-backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--mp-kenar); position: relative; z-index: 30;
}
.mp-kirinti { display: flex; gap: .4rem; font-size: .8rem; color: var(--mp-metin-3); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-kirinti span + span::before { content: "/"; margin-right: .4rem; opacity: .6; }
.mp-kirinti span:last-child { color: var(--mp-metin); font-weight: 500; }
.mp-ust-sag { margin-left: auto; display: flex; align-items: center; gap: .2rem; }
.mp-simge {
  position: relative; width: 36px; height: 36px; display: inline-grid; place-items: center; flex: none;
  border: 0; border-radius: 9px; background: transparent; color: var(--mp-metin-2); cursor: pointer;
}
.mp-simge svg { width: 19px; height: 19px; }
.mp-simge:hover { background: var(--mp-hover); color: var(--mp-metin); }
.mp-simge .mp-gunes { display: none; }
:root[data-tema="koyu"] .mp-simge .mp-ay { display: none; }
:root[data-tema="koyu"] .mp-simge .mp-gunes { display: block; }
.mp-ayrac { width: 1px; height: 24px; background: var(--mp-kenar); margin: 0 .3rem; }
.mp-rozet {
  position: absolute; top: 3px; right: 2px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 999px; background: #ef4444; color: #fff; font-size: .62rem; font-weight: 700;
  display: grid; place-items: center; border: 2px solid var(--mp-kart);
}
/* display:grid hidden'i eziyordu; okunmamis 0 iken bos kirmizi rozet kaliyordu */
.mp-rozet[hidden] { display: none; }
.mp-ara { margin-right: .3rem; }
.mp-ara input { width: 210px; }

.mp-zil-sar, .mp-profil-sar { position: relative; }
.mp-acilir {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
  background: var(--mp-kart); border: 1px solid var(--mp-kenar); border-radius: 12px; box-shadow: var(--mp-golge);
}
.mp-zil-liste { width: min(360px, calc(100vw - 1.5rem)); overflow: hidden; }
.mp-zil-tepe { display: flex; align-items: center; padding: .7rem .9rem; border-bottom: 1px solid var(--mp-kenar); font-weight: 600; font-size: .88rem; }
.mp-zil-tepe button { margin-left: auto; border: 0; background: none; color: #059669; font-size: .76rem; font-weight: 600; cursor: pointer; }
.mp-zil-govde { max-height: 380px; overflow-y: auto; }
.mp-zil-oge {
  display: grid; gap: 2px; width: 100%; text-align: left; padding: .65rem .9rem; border: 0; border-bottom: 1px solid var(--mp-kenar);
  background: transparent; color: inherit; font: inherit; cursor: pointer; border-left: 3px solid transparent;
}
.mp-zil-oge:hover { background: var(--mp-hover); }
.mp-zil-oge.okunmamis { border-left-color: var(--mp-ana); background: color-mix(in srgb, var(--mp-ana) 5%, transparent); }
.mp-zil-oge strong { font-size: .84rem; font-weight: 600; color: var(--mp-metin); }
.mp-zil-oge span { font-size: .78rem; color: var(--mp-metin-2); }
.mp-zil-oge small { font-size: .7rem; color: var(--mp-metin-3); }
.mp-zil-bos { padding: 1.4rem 1rem; text-align: center; font-size: .84rem; color: var(--mp-metin-3); }
.mp-zil-alt { display: block; width: 100%; padding: .65rem; border: 0; background: none; color: var(--mp-ana); font-weight: 600; font-size: .8rem; cursor: pointer; }
.mp-zil-alt:hover { background: var(--mp-hover); }

.mp-profil {
  display: flex; align-items: center; gap: .55rem; height: 40px; padding: 0 .45rem 0 .3rem; margin-left: .2rem;
  border: 1px solid transparent; border-radius: 10px; background: transparent; color: inherit; cursor: pointer; font: inherit;
}
.mp-profil:hover, .mp-profil[aria-expanded="true"] { background: var(--mp-hover); border-color: var(--mp-kenar); }
.mp-bas-harf {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: linear-gradient(135deg, var(--mp-ana), var(--mp-vurgu)); color: #fff; font-weight: 600; font-size: .85rem;
}
.mp-profil-yazi { display: grid; text-align: left; line-height: 1.2; max-width: 160px; }
.mp-profil-yazi .ad { font-size: .82rem; font-weight: 600; color: var(--mp-metin); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-profil-yazi .rol { font-size: .7rem; color: var(--mp-metin-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-ok { width: 14px; height: 14px; color: var(--mp-metin-3); }
.mp-profil-menu { width: 220px; padding: .35rem; }
.mp-profil-menu button {
  display: block; width: 100%; text-align: left; padding: .55rem .7rem; border: 0; border-radius: 8px;
  background: none; color: var(--mp-metin); font: inherit; font-size: .85rem; cursor: pointer;
}
.mp-profil-menu button:hover { background: var(--mp-hover); }
.mp-profil-menu hr { border: 0; border-top: 1px solid var(--mp-kenar); margin: .3rem 0; }
.mp-profil-menu .mp-cikis { color: #dc2626; }
.mp-profil-menu .mp-profil-no { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem; color: var(--mp-soluk, #6b7280); }

.mp-icerik { flex: 1; overflow-y: auto; padding: 1.5rem; }
.mp-baslik { margin: 0 0 1.1rem; font-family: var(--yazi-baslik); font-size: 1.4rem; font-weight: 600; color: var(--mp-metin); letter-spacing: -.01em; }

/* ── Gosterge ────────────────────────────────────── */
.mp-karsilama {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding: 1.25rem 1.4rem; margin-bottom: 1.25rem;
  border-radius: 16px; color: #fff; background: linear-gradient(120deg, var(--mp-ana-koyu), var(--mp-ana) 60%, var(--mp-vurgu));
  box-shadow: 0 12px 30px color-mix(in srgb, var(--mp-ana) 25%, transparent);
}
.mp-karsilama h2 { margin: 0; font-size: 1.2rem; font-weight: 600; color: #fff; }
.mp-karsilama p { margin: .2rem 0 0; font-size: .86rem; opacity: .9; }
.mp-karsilama .dugme { margin-left: auto; background: #fff; color: var(--mp-ana-koyu); border-color: #fff; }
.mp-serit {
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; padding: .85rem 1.1rem; margin-bottom: 1.25rem;
  border-radius: 12px; border: 1px solid color-mix(in srgb, #f59e0b 40%, var(--mp-kenar));
  background: color-mix(in srgb, #f59e0b 9%, var(--mp-kart)); font-size: .86rem;
}
.mp-serit .dugme { margin-left: auto; }
.mp-hizli { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .75rem; }
.mp-hizli button {
  display: flex; align-items: center; gap: .65rem; padding: .85rem .95rem; border: 1px solid var(--mp-kenar); border-radius: 12px;
  background: var(--mp-kart); color: var(--mp-metin); font: inherit; font-size: .86rem; font-weight: 500; cursor: pointer; text-align: left;
  transition: border-color .15s ease, transform .15s ease;
}
.mp-hizli button:hover { border-color: var(--mp-ana); transform: translateY(-1px); }
.mp-hizli svg { width: 20px; height: 20px; color: var(--mp-ana); flex: none; }
.mp-bilgi-satir { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px dashed var(--mp-kenar); font-size: .86rem; }
.mp-bilgi-satir:last-child { border-bottom: 0; }
.mp-bilgi-satir span:first-child { color: var(--mp-metin-3); }

/* ── Destek ──────────────────────────────────────── */
.mp-tablo { width: 100%; border-collapse: collapse; font-size: .86rem; }
.mp-tablo th { text-align: left; font-weight: 600; font-size: .74rem; letter-spacing: .04em; text-transform: uppercase; color: var(--mp-metin-3); padding: .55rem .6rem; border-bottom: 1px solid var(--mp-kenar); }
.mp-tablo td { padding: .65rem .6rem; border-bottom: 1px solid var(--mp-kenar); vertical-align: middle; }
.mp-tablo tr[data-tik] { cursor: pointer; }
.mp-tablo tr[data-tik]:hover td { background: var(--mp-hover); }
.mp-tablo-sar { overflow-x: auto; }
.mp-mesajlar { display: grid; gap: .75rem; margin-bottom: 1rem; }
.mp-mesaj { max-width: 82%; padding: .7rem .9rem; border-radius: 12px; border: 1px solid var(--mp-kenar); background: var(--mp-kart); font-size: .88rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.mp-mesaj.musteri { justify-self: end; background: color-mix(in srgb, var(--mp-ana) 8%, var(--mp-kart)); border-color: color-mix(in srgb, var(--mp-ana) 25%, var(--mp-kenar)); }
.mp-mesaj.sistem { justify-self: center; font-size: .78rem; color: var(--mp-metin-3); background: transparent; border-style: dashed; }
.mp-mesaj small { display: block; margin-top: .35rem; font-size: .72rem; color: var(--mp-metin-3); }
.mp-mesaj a { color: var(--mp-ana); }
.mp-makale { font-size: .92rem; line-height: 1.7; }
.mp-makale img { max-width: 100%; height: auto; }

/* ── Telefon / tablet: cekmece ───────────────────── */
.mp-ortu { position: fixed; inset: 0; background: rgba(2, 6, 23, .5); z-index: 45; backdrop-filter: blur(2px); }
@media (max-width: 1023px) {
  .mp-yan { position: fixed; left: 0; top: 0; bottom: 0; transform: translateX(-100%); transition: transform .22s ease; box-shadow: var(--mp-golge); z-index: 50; }
  .mp-cekmece-acik .mp-yan { transform: none; }
  .mp-ara input { width: 150px; }
  .mp-profil-yazi, .mp-ok { display: none; }
}
@media (max-width: 640px) {
  .mp-gizle-tel, .mp-ara { display: none; }
  .mp-ust { padding: 0 .5rem; gap: .3rem; }
  .mp-icerik { padding: 1rem .9rem; }
  .mp-baslik { font-size: 1.2rem; }
  .mp-karsilama .dugme { margin-left: 0; }
  .mp-mesaj { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .mp-yan, .mp-hizli button { transition: none; } }

/* ── Ince ayar (ilk ekran denetimi, 16 Eki 2026) ── */
.mp-kirinti span + span::before { content: none; }
.mp-menu a[aria-current="page"] { box-shadow: none; }
:root[data-tema="koyu"] .mp-menu a[aria-current="page"] { background: var(--mp-aktif); color: var(--mp-vurgu); }
.mp-karsilama h2, .mp-karsilama p { color: #fff !important; }
.mp-karsilama p { opacity: .92; }
.mp-zil-oge span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
:root[data-tema="koyu"] .mp-imza { filter: invert(1); opacity: .75; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="acik"]) .mp-imza { filter: invert(1); opacity: .75; }
  :root:not([data-tema="acik"]) .mp-simge .mp-ay { display: none; }
  :root:not([data-tema="acik"]) .mp-simge .mp-gunes { display: block; }
  :root:not([data-tema="acik"]) .mp-menu a[aria-current="page"] { color: var(--mp-vurgu); }
}

/* Duyurular (gosterge ustu) */
.mp-duyuru { display: flex; align-items: flex-start; gap: .8rem; margin: 0 0 1rem; padding: .9rem 1rem; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--ana) 35%, var(--kenar)); background: color-mix(in srgb, var(--ana) 8%, var(--kart)); }
.mp-duyuru-uyari { border-color: #d97706; background: color-mix(in srgb, #d97706 10%, var(--kart)); }
.mp-duyuru-bakim { border-color: #6b7280; background: color-mix(in srgb, #6b7280 10%, var(--kart)); }
.mp-duyuru-kampanya { border-color: #db2777; background: color-mix(in srgb, #db2777 8%, var(--kart)); }
.mp-duyuru-govde { flex: 1; display: grid; gap: .25rem; }
.mp-duyuru-govde p { margin: 0; color: var(--metin-2); font-size: .9rem; white-space: pre-line; }
.mp-duyuru-govde a { font-weight: 600; color: var(--ana); font-size: .9rem; }

/* Destek oturumu seridi (yonetici musteri olarak girdiginde) */
.mp-destek-serit { position: sticky; top: 0; z-index: 200; display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; padding: .55rem 1rem; background: #b45309; color: #fff; font-size: .88rem; }
.mp-destek-serit button { margin-left: auto; border: 1px solid rgba(255,255,255,.6); background: transparent; color: #fff; border-radius: 999px; padding: .25rem .8rem; font: inherit; cursor: pointer; }
.mp-destek-serit button:hover { background: rgba(255,255,255,.15); }

/* Panel Tasarimi: gostergeye eklenen serbest widget'lar ve sarmalayicilar */
.mp-duyurular > .mp-duyuru:last-child, .mp-uyarilar > .mp-serit:last-child { margin-bottom: 0; }
.mp-uyarilar { display: grid; gap: .75rem; }
.mp-uyarilar > .mp-serit { margin-bottom: 0; }
.pt-metin { padding: 1.1rem 1.25rem; border-radius: 14px; border: 1px solid var(--mp-kenar); background: var(--mp-kart); }
.pt-metin h3 { margin: 0 0 .4rem; font-size: 1.05rem; font-weight: 600; color: var(--mp-metin); }
.pt-metin p { margin: 0; font-size: .9rem; line-height: 1.6; color: var(--mp-metin-2); white-space: pre-line; }
.pt-metin .dugme { margin-top: .85rem; display: inline-flex; text-decoration: none; }
.pt-metin-ana { border-color: color-mix(in srgb, var(--mp-ana) 40%, var(--mp-kenar)); background: color-mix(in srgb, var(--mp-ana) 8%, var(--mp-kart)); }
.pt-metin-bilgi { border-color: color-mix(in srgb, #0ea5e9 40%, var(--mp-kenar)); background: color-mix(in srgb, #0ea5e9 8%, var(--mp-kart)); }
.pt-metin-uyari { border-color: color-mix(in srgb, #f59e0b 45%, var(--mp-kenar)); background: color-mix(in srgb, #f59e0b 9%, var(--mp-kart)); }
.pt-metin-basari { border-color: color-mix(in srgb, #16a34a 40%, var(--mp-kenar)); background: color-mix(in srgb, #16a34a 8%, var(--mp-kart)); }
.pt-gorsel { display: block; overflow: hidden; border-radius: 14px; border: 1px solid var(--mp-kenar); background: var(--mp-kart); }
.pt-gorsel img { display: block; width: 100%; height: auto; }
a.pt-gorsel:hover { border-color: var(--mp-ana); }

/* Panel modulu (054, SOZLESME 1.2): uygulama grubunda ozellikler ile yonetim baglantilari arasi cizgi */
.mp-uyg-ayrac { border: 0; border-top: 1px solid var(--mp-kenar); margin: .35rem .7rem; }
.uyg-modul { min-height: 50vh; }

/* ── Uygulama magazasi (24 Eki 2026) ──────────────────────────────────
   Liste ogesi etesio.com ana sayfasindaki Uygulamalar bolumunun ogesi (et-uyg, tema-etesio.css);
   arac cubugu ve ayrinti vitrinin parcalari (mk-ara, mk-secim, ud-*, magaza-kart.css). Burada
   yalniz panelin dar alanina uyarlama ve panel renkleri. */
.mp-magaza { container-type: inline-size; max-width: 1120px; }
.mp-magaza-arac { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 15rem); gap: .75rem; margin: 0 0 1.75rem; }
.mp-magaza-arac .mk-secim { max-width: none; }
.mp-magaza-arac:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
.mp-uyg-izgara { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem 1.5rem; }
@container (max-width: 900px) { .mp-uyg-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 560px) {
  .mp-uyg-izgara { grid-template-columns: minmax(0, 1fr); gap: .9rem; }
  .mp-magaza-arac { grid-template-columns: minmax(0, 1fr); }
}
.mp .mp-uyg { width: auto; min-width: 0; margin: 0; padding: .55rem; border: 0; border-radius: 14px; background: none; color: inherit;
  font: inherit; text-align: left; cursor: pointer; transition: background-color .15s ease; }
.mp .mp-uyg:hover { background: var(--mp-hover); }
.mp .mp-uyg:focus-visible { outline: 2px solid var(--ana); outline-offset: 2px; }
.mp .mp-uyg[hidden], .mp-magaza-bolum[hidden], .mp-magaza-yok[hidden] { display: none; }
.mp .mp-magaza .et-uyg-simge { width: 72px; height: 72px; box-shadow: 0 6px 14px rgba(15, 23, 42, .18); }
.mp .mp-magaza .et-uyg-simge b { font-size: 2rem; }
.mp .mp-magaza .et-uyg-yazi { display: block; min-width: 0; }
.mp .mp-magaza .et-uyg-yazi strong { margin: .15rem 0 .3rem; font-size: 1rem; font-weight: 600; line-height: 1.3; color: var(--metin); }
.mp .mp-magaza .et-uyg-yazi strong em { font-weight: 600; white-space: nowrap; }
.mp .mp-magaza .et-uyg-yazi strong em.mp-hap-kullan { background: var(--basari, #15803d); }
.mp .mp-magaza .et-uyg-yazi strong em.mp-hap-talep { background: #b45309; }
.mp .mp-magaza .et-uyg-yazi small { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  font-size: .84rem; font-weight: 400; line-height: 1.45; color: var(--metin-2); }
.mp-uyg-fiyat { display: block; margin-top: .35rem; font-size: .78rem; color: var(--metin-3); font-variant-numeric: tabular-nums; }
.mp-magaza-yakinda { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--kenar); }
.mp-magaza-yakinda h2 { margin: 0 0 1rem; font-size: 1rem; font-weight: 600; color: var(--metin-2); }
.mp-magaza-yok { margin: 2.5rem 0; text-align: center; color: var(--metin-3); }

/* Ayrinti: vitrinin urun sayfasi (ud-*) panelin genisligine gore */
.mp-geri { display: inline-flex; align-items: center; min-height: 36px; margin: -.35rem 0 1rem; font-size: .88rem; font-weight: 500; color: var(--metin-2); text-decoration: none; }
.mp-geri:hover { color: var(--ana); }
.mp-ud .ud-ust-izgara { grid-template-columns: minmax(140px, 190px) minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 2rem); }
.mp-ud .ud-bilgi h2 { margin: 0 0 .45rem; font-size: clamp(1.4rem, 2.6vw, 1.9rem); line-height: 1.15; letter-spacing: -.02em; color: var(--metin); }
.mp-ud .ud-ozet { margin-bottom: .75rem; }
.mp-ud .ud-durum.mp-hap-kullan { color: var(--basari, #15803d); border-color: color-mix(in srgb, var(--basari, #15803d) 40%, var(--kenar)); }
.mp-ud .ud-durum.mp-hap-talep { color: #b45309; border-color: color-mix(in srgb, #b45309 40%, var(--kenar)); }
.mp-ud-aciklama { max-width: 46rem; margin: 0 0 1rem; font-size: .92rem; line-height: 1.65; color: var(--metin-2); white-space: pre-line; }
.mp-ud .ud-not { margin-top: 1.25rem; }
.mp-ud .ud-logo.mp-ud-harf { background: var(--kart); }
.mp-ud-harf .et-uyg-simge { width: 56%; height: 56%; border-radius: 18%; }
.mp-ud-harf .et-uyg-simge b { font-size: clamp(2rem, 5vw, 3rem); }
.mp-ud-paketler { margin-top: 2rem; }
.mp-ud-paket-tepe { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin: 0 0 1rem; }
.mp-ud-paket-tepe h3 { margin: 0; font-size: 1.15rem; color: var(--metin); }
.mp-paket-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 1rem; align-items: stretch; }
.mp-paket { position: relative; display: flex; flex-direction: column; gap: .6rem; min-width: 0; padding: 1.15rem 1.2rem; border: 1px solid var(--kenar); border-radius: 16px; background: var(--kart); }
.mp-paket-one { border-color: var(--ana); box-shadow: 0 0 0 1px var(--ana); }
.mp-paket-rozet { align-self: flex-start; padding: .12rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 600;
  background: color-mix(in srgb, var(--ana) 12%, var(--kart)); color: var(--ana); }
.mp-paket h4 { margin: 0; font-size: 1rem; color: var(--metin); }
.mp-paket-fiyat { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .4rem; margin: 0; }
.mp-paket-fiyat strong { font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; color: var(--metin); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mp-paket-fiyat .mp-paket-fiyat-yok { font-size: 1.05rem; color: var(--metin-2); }
.mp-paket-fiyat small { font-size: .8rem; color: var(--metin-3); }
.mp-paket-fiyat del { font-size: .85rem; color: var(--metin-3); }
.mp-paket-kampanya { margin: 0; font-size: .8rem; font-weight: 600; color: var(--basari, #15803d); }
.mp-paket-aciklama { margin: 0; font-size: .86rem; line-height: 1.5; color: var(--metin-2); }
.mp-paket-madde { display: grid; gap: .35rem; margin: 0; padding: 0; list-style: none; font-size: .85rem; color: var(--metin-2); }
.mp-paket-madde li { position: relative; padding-left: 1rem; line-height: 1.45; }
.mp-paket-madde li::before { content: ''; position: absolute; left: .15rem; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--ana); opacity: .7; }
.mp-paket-eylem { display: grid; gap: .5rem; margin-top: auto; padding-top: .35rem; }
.mp-paket-eylem .ud-dugme { width: 100%; min-width: 0; min-height: 44px; padding: 0 1rem; font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; }
.mp-paket-not { margin: 0; font-size: .82rem; color: var(--metin-3); }
.mp-ud-paketler > .mp-paket-not { margin-top: 1rem; }
.mp-ud .ud-eylem .ud-dugme { min-width: 10rem; font: inherit; font-weight: 600; cursor: pointer; }
@container (max-width: 640px) {
  .mp-ud .ud-ust-izgara { grid-template-columns: minmax(0, 1fr); }
  .mp-ud .ud-logo-kap { max-width: 128px; }
  .mp-ud .ud-eylem { display: grid; grid-template-columns: minmax(0, 1fr); }
}