/* kenmedia.tr — Sosyal Medya Reklamları: eigene Visuals (lädt nur auf sosyal-medya-reklamlari.html) */

/* ---------- Hero: Karten-Stapel ---------- */
.pstack-wrap{position:relative;justify-self:center;width:min(100%,440px)}
.pstack{position:relative;height:440px}
.pcardx{position:absolute;left:50%;top:10px;width:300px;margin-left:-150px;display:grid;gap:12px;padding:16px;border-radius:24px;
  background:linear-gradient(170deg,#1B1F27,#12151B);border:1px solid rgba(255,255,255,.12);box-shadow:0 30px 70px -30px rgba(0,0,0,.8);
  transition:transform .8s var(--ease),opacity .8s var(--ease),filter .8s;opacity:0;transform:translateX(70px) rotate(6deg) scale(.92);filter:blur(1px)}
.pcardx.is-on{opacity:1;transform:none;filter:none;z-index:3}
.pcardx.is-prev{opacity:.35;transform:translateX(-80px) rotate(-7deg) scale(.88);z-index:2}
.pcardx.is-next{opacity:.35;transform:translateX(80px) rotate(7deg) scale(.88);z-index:1}
.px-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.px-top b{color:#fff;font-size:.9375rem}
.px-top span{font-size:.75rem;font-weight:700;color:#fff;padding:4px 10px;border-radius:999px;background:var(--px,#0066B2)}
.pcardx--ig{--px:#7B5CFF}.pcardx--li{--px:#0A66C2}.pcardx--fb{--px:#1877F2}.pcardx--tt{--px:#E5245E}
.px-media{position:relative;border-radius:16px;overflow:hidden;background:linear-gradient(135deg,color-mix(in srgb,var(--px) 55%,#0B0C10),#0B0C10)}
.px-media--sq{aspect-ratio:1.1}
.px-media--sq i{position:absolute;left:30%;top:22%;width:40%;height:56%;border-radius:14px;background:rgba(255,255,255,.85);box-shadow:0 20px 40px -10px rgba(0,0,0,.5)}
.px-media--doc{aspect-ratio:1.1;display:grid;align-content:center;gap:10px;padding:24px}
.px-media--doc i{height:12px;border-radius:6px;background:rgba(255,255,255,.75)}.px-media--doc i:nth-child(2){width:80%;background:rgba(255,255,255,.45)}.px-media--doc i:nth-child(3){width:55%;height:40px;border-radius:10px;background:rgba(255,255,255,.2)}
.px-media--map{aspect-ratio:1.1;background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(135deg,color-mix(in srgb,var(--px) 50%,#0B0C10),#0B0C10);background-size:22px 22px,22px 22px,auto}
.px-media--map i{position:absolute;left:50%;top:44%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:#fff;box-shadow:0 0 0 12px rgba(255,255,255,.12)}
.px-media--vid{aspect-ratio:1.1}
.px-media--vid i{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;background:rgba(255,255,255,.9)}
.px-media--vid i::after{content:"";position:absolute;left:22px;top:17px;border-left:16px solid var(--px);border-top:10px solid transparent;border-bottom:10px solid transparent}
.px-msg{color:#fff;font-weight:700;font-size:1rem}
.px-cta{justify-self:stretch;text-align:center;padding:10px;border-radius:12px;background:var(--px);color:#fff;font-weight:700;font-size:.875rem}
.px-dots{position:absolute;left:0;right:0;bottom:6px;display:flex;justify-content:center;gap:8px}
.px-dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.25);transition:width .4s,background .4s}
.px-dots i.is-on{width:26px;border-radius:4px;background:var(--blue-lt)}
.pstack-wrap .ac-pause{right:0;bottom:0}
@media (max-width:420px){.pcardx{width:260px;margin-left:-130px}.pstack{height:400px}}
@media (prefers-reduced-motion:reduce){.pcardx{transition:none}}

/* ---------- Plattform-Tabs ---------- */
.ptab-list{display:flex;gap:8px;padding:6px;border-radius:999px;background:var(--dark-2);border:1px solid var(--line-d);width:max-content;max-width:100%;overflow-x:auto;margin-bottom:32px}
.ptab-list button{min-height:44px;padding:10px 22px;border:0;border-radius:999px;background:none;color:#C4C9D1;font:inherit;font-weight:700;cursor:pointer;white-space:nowrap;transition:background .25s,color .25s}
.ptab-list button:hover{color:#fff}
.ptab-list button[aria-selected="true"]{background:var(--blue);color:#fff}
.ptab-pan{display:grid;gap:24px}
@media (min-width:1024px){.ptab-pan{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:48px;align-items:start}}
.js .ptabs.is-ready .ptab-pan[hidden]{display:none}
.js .ptabs.is-ready .ptab-pan:not([hidden]){animation:pp-in .5s var(--ease)}
@keyframes pp-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.ptabs:not(.is-ready) .ptab-pan+.ptab-pan{margin-top:56px;padding-top:56px;border-top:1px solid var(--line-d)}
.pp-main{display:grid;gap:16px}
.pp-h{font-size:clamp(1.625rem,1.2rem + 1.6vw,2.375rem);letter-spacing:-.03em;line-height:1.1;color:#fff}
.pp-h em{font-style:normal;color:var(--blue-lt);display:block}
.pp-lead{font-size:clamp(1.0313rem,1rem + .25vw,1.1875rem);color:#D2D6DC;line-height:1.6}
.pp-main h3{margin-top:8px;font-size:1.0625rem;color:#fff}
.pp-main p:not(.pp-lead){color:#B9BEC7}
.pp-side{display:grid;gap:14px}
.pp-box{padding:24px;border-radius:var(--r3);background:var(--dark-2);border:1px solid var(--line-d)}
.pp-box h3{font-size:1.0625rem;color:#fff;margin-bottom:14px}
.pp-box p{color:#C4C9D1;font-size:.9688rem}
.pp-box--hl{background:linear-gradient(135deg,rgba(0,102,178,.35),rgba(0,102,178,.12));border-color:rgba(90,176,240,.4)}
.pp-goals{display:grid;gap:8px}
.pp-goals li{position:relative;padding-left:28px;color:#E6E9ED;font-size:.9688rem}
.pp-goals li::before{content:"";position:absolute;left:0;top:.2em;width:18px;height:18px;border-radius:50%;background:rgba(90,176,240,.2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%235AB0F0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}

/* ---------- Matrix ---------- */
.no-big{display:inline-block;font-size:1.4em;font-weight:800;color:var(--ink);margin-right:6px}
.matrix{border-radius:var(--r3);overflow:hidden;border:1px solid var(--line);background:var(--bg)}
.mx-row{display:grid;grid-template-columns:minmax(0,2fr) repeat(4,minmax(0,1fr));align-items:center}
.mx-row+.mx-row{border-top:1px solid var(--line)}
.mx-row>span{padding:18px 16px;text-align:center}
.mx-row>span:first-child{text-align:left;font-weight:700}
.mx-head{background:var(--ink);color:#fff}
.mx-head span{font-size:.8125rem;font-weight:700;letter-spacing:.02em}
.mx-row [role="cell"] i{display:inline-block;width:22px;height:22px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 6px rgba(0,102,178,.15)}
.mx-row [role="cell"]:not(.on)::after{content:"";display:inline-block;width:10px;height:2px;background:var(--line-2);opacity:.5;vertical-align:middle}
.matrix.in .mx-row [role="cell"].on i{animation:mx-pop .6s var(--ease) both}
.matrix.in .mx-row:nth-child(3) .on i{animation-delay:.25s}.matrix.in .mx-row:nth-child(4) .on i{animation-delay:.5s}
@keyframes mx-pop{from{transform:scale(0)}to{transform:scale(1)}}
@media (max-width:640px){.mx-row{grid-template-columns:minmax(0,1.6fr) repeat(4,minmax(0,1fr))}.mx-row>span{padding:14px 6px;font-size:.8125rem}.mx-head span{font-size:.6875rem}.mx-row [role="cell"] i{width:16px;height:16px}}
.mx-text{display:grid;gap:12px;margin-top:24px;max-width:900px}
.mx-text p:first-child{color:var(--muted)}

/* ---------- Versprechen-Kette ---------- */
.promise{padding:28px;border-radius:var(--r3);background:var(--dark-2);border:1px solid var(--line-d)}
.promise ol{position:relative;display:grid;gap:10px;margin:18px 0}
.promise li{position:relative;display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid var(--line-d);font-weight:700;color:#fff}
.promise li span{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:rgba(0,102,178,.3);border:1.5px solid rgba(90,176,240,.5)}
.promise li svg{width:18px;height:18px;color:var(--blue-lt)}
.promise li:not(:last-child)::after{content:"";position:absolute;left:31px;bottom:-11px;width:2px;height:10px;background:rgba(90,176,240,.5)}
.promise-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--blue-lt);font-weight:700;text-decoration:none}
.promise-link svg{width:18px;height:18px;transition:transform .2s}.promise-link:hover svg{transform:translateX(4px)}
.ps-paused main *{animation-play-state:paused!important}
@media (max-width:600px){.pstack-wrap{overflow:hidden;padding-bottom:4px}.pcardx.is-prev{transform:translateX(-36px) rotate(-5deg) scale(.86)}.pcardx.is-next{transform:translateX(36px) rotate(5deg) scale(.86)}.pcardx{transform:translateX(36px) scale(.86)}}