/* ==========================================================================
   kenmedia.tr — Erklär-Visuals der Phase-2-Leistungsseiten (explain.css)
   ChatGPT Reklamları · Uluslararası SEO · E-Ticaret SEO · Kurumsal Web Tasarım · SEO Danışmanlığı
   Alle Visuals dekorativ (aria-hidden); Animation pausierbar (anim-pause.js) + prefers-reduced-motion.
   ========================================================================== */
.xchat,.xtree,.xstore,.xbrowser,.xcycle{position:relative;border-radius:var(--r3);border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));box-shadow:0 30px 80px -30px rgba(0,0,0,.6);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
@media (max-width:1079px){.xchat,.xtree,.xstore,.xbrowser,.xcycle{max-width:560px}}

/* ---------- ChatGPT: Chat-Fenster ---------- */
.xchat{overflow:hidden}
.xchat-bar{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.08);font-size:.875rem;font-weight:600;color:var(--muted-d)}
.xchat-dot{width:22px;height:22px;border-radius:50%;background:conic-gradient(from 90deg,#5AB0F0,#0066B2,#5AB0F0)}
.xchat-body{display:grid;gap:16px;padding:22px 20px 26px}
.xchat-q{justify-self:end;max-width:86%;padding:12px 16px;border-radius:18px 18px 4px 18px;background:var(--blue);color:#fff;font-size:.9375rem;line-height:1.45;
  animation:x-pop 10s var(--ease) infinite}
.xchat-a{display:flex;gap:12px;align-items:flex-start;animation:x-show 10s var(--ease) infinite}
.xchat-ai{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:rgba(90,176,240,.15)}
.xchat-ai svg{width:16px;height:16px;color:var(--blue-lt)}
.xchat-lines{flex:1;display:grid;gap:9px;padding-top:6px}
.xchat-lines i{display:block;height:9px;border-radius:9px;background:rgba(255,255,255,.14);transform-origin:left;animation:x-line 10s var(--ease) infinite}
.xchat-lines i:nth-child(2){width:92%;animation-delay:.15s}.xchat-lines i:nth-child(3){width:96%;animation-delay:.3s}.xchat-lines i:nth-child(4){width:60%;animation-delay:.45s}
.xchat-ad{position:relative;display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:center;padding:16px;border-radius:16px;
  background:#fff;color:var(--ink);box-shadow:0 20px 40px -20px rgba(0,0,0,.6);animation:x-ad 10s var(--ease) infinite}
.xchat-tag{grid-column:1/-1;width:max-content;padding:2px 8px;border-radius:6px;background:var(--bg);font-size:.6875rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.xchat-fav{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:var(--blue);color:#fff;font-weight:800}
.xchat-adt{display:grid;gap:2px;line-height:1.3}
.xchat-adt b{font-size:.9375rem}
.xchat-adt small{font-size:.875rem;color:var(--muted)}
.xchat-adt em{font-style:normal;font-size:.8125rem;color:var(--blue)}
@keyframes x-pop{0%,4%{opacity:0;transform:translateY(8px)}10%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes x-show{0%,12%{opacity:0}16%,92%{opacity:1}100%{opacity:0}}
@keyframes x-line{0%,14%{transform:scaleX(0)}30%,92%{transform:scaleX(1)}100%{transform:scaleX(1);opacity:0}}
@keyframes x-ad{0%,38%{opacity:0;transform:translateY(14px)}46%,92%{opacity:1;transform:none}100%{opacity:0}}

/* ---------- So funktioniert's (3 Schritte) ---------- */
.xhow{display:grid;gap:16px;counter-reset:x}
@media (min-width:900px){.xhow{grid-template-columns:repeat(3,1fr);gap:28px}}
.xhow li{position:relative;display:grid;gap:12px;align-content:start;padding:32px 28px;border-radius:var(--r3);background:var(--surface);border:1px solid var(--line)}
.xhow-n{position:absolute;top:22px;right:24px;font-size:3rem;font-weight:800;letter-spacing:-.05em;line-height:1;color:var(--blue-soft)}
.xhow-ico{display:grid;place-items:center;width:56px;height:56px;border-radius:16px;background:var(--ink)}
.xhow-ico svg{width:26px;height:26px;color:var(--blue-lt)}
.xhow li:last-child .xhow-ico{background:var(--blue)}
.xhow li:last-child .xhow-ico svg{color:#fff}
.xhow h3{font-size:1.25rem;letter-spacing:-.02em}
.xhow p{color:var(--muted)}
@media (min-width:900px){.xhow li:not(:last-child)::after{content:"";position:absolute;top:58px;right:-24px;width:20px;height:2px;background:var(--line-2);opacity:.6}}

/* ---------- Fakten ---------- */
.xfacts{display:grid;gap:16px}
@media (min-width:860px){.xfacts{grid-template-columns:repeat(3,1fr)}}
.xfact{display:grid;gap:10px;align-content:start;padding:28px;border-radius:var(--r3);background:var(--bg);border:1px solid var(--line)}
.xfact b{font-size:clamp(1.75rem,1.3rem + 1.6vw,2.5rem);font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--blue)}
.xfact span{color:var(--muted)}
.xsrc{margin-top:16px;font-size:.8125rem;color:var(--muted)}

/* ---------- Vergleich ---------- */
.xvs{display:grid;gap:16px}
@media (min-width:860px){.xvs{grid-template-columns:1fr 1fr}}
.xvs-col{display:grid;gap:16px;align-content:start;padding:30px;border-radius:var(--r3);background:var(--surface);border:1px solid var(--line)}
.white .xvs-col{background:var(--bg)}
.xvs-col--hi{background:var(--dark)!important;border-color:var(--dark);color:var(--on-dark)}
.xvs-h{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.25rem;letter-spacing:-.02em}
.xvs-h svg{width:24px;height:24px;color:var(--blue)}
.xvs-col--hi .xvs-h svg{color:var(--blue-lt)}
.xvs ul{display:grid}
.xvs li{display:grid;gap:2px;padding:12px 0;border-top:1px solid var(--line)}
.xvs-col--hi li{border-top-color:var(--line-d)}
.xvs li b{font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.xvs-col--hi li b{color:var(--muted-d)}
.xvs-link{display:inline-flex;align-items:center;gap:8px;width:max-content;min-height:44px;font-weight:700;color:var(--blue);text-decoration:none}
.xvs-link svg{width:18px;height:18px}

/* ---------- Uluslararası SEO: Baum ---------- */
.xtree{padding:26px 24px}
.xtree-t{font-size:.8125rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-d);margin-bottom:18px}
.xtree-root{display:flex;justify-content:center}
.xtree-dom{padding:10px 18px;border-radius:999px;background:#fff;color:var(--ink);font-weight:800}
.xtree-lines{display:block;width:100%;height:46px}
.xtree-lines path{fill:none;stroke:rgba(90,176,240,.55);stroke-width:2;stroke-dasharray:6 6;vector-effect:non-scaling-stroke;animation:x-dash 2.4s linear infinite}
@keyframes x-dash{to{stroke-dashoffset:-24}}
.xtree-kids{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.xtree-n{display:grid;justify-items:center;gap:2px;padding:14px 8px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);text-align:center}
.xtree-n b{font-size:1.25rem;font-weight:800;color:#fff}
.xtree-n span{font-size:.8125rem;color:var(--blue-lt);font-weight:600}
.xtree-n small{font-size:.75rem;color:var(--muted-d)}
.xtree-n--hi{background:var(--blue);border-color:var(--blue);animation:x-glow 3s ease-in-out infinite}
.xtree-n--hi span,.xtree-n--hi small{color:#DCEBFA}
@keyframes x-glow{50%{box-shadow:0 0 0 8px rgba(0,102,178,.25)}}
.xtree-serp{display:grid;gap:8px;margin-top:18px;padding:16px;border-radius:16px;background:#fff;color:var(--ink)}
.xtree-g{font-size:.75rem;font-weight:700;color:var(--muted)}
.xtree-res{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;align-items:center}
.xtree-res i{grid-row:1/3;width:28px;height:28px;border-radius:8px;background:var(--blue-soft)}
.xtree-res b{font-size:.9375rem;color:var(--blue)}
.xtree-res small{font-size:.8125rem;color:var(--muted)}

/* USP (dunkel) */
.xusp-grid{display:grid;gap:16px}
@media (min-width:860px){.xusp-grid{grid-template-columns:repeat(3,1fr)}}
.xusp-c{display:grid;gap:10px;align-content:start;padding:30px;border-radius:var(--r3);background:var(--dark-2);border:1px solid var(--line-d)}
.xusp-c b{font-size:clamp(2rem,1.4rem + 2vw,3rem);font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--blue-lt)}
.xusp-c h3{font-size:1.25rem;letter-spacing:-.02em}
.xusp-c p{color:var(--muted-d)}

/* Keyword-Tabelle */
.xkw{display:grid;border-radius:var(--r3);overflow:hidden;border:1px solid var(--line);background:var(--surface)}
.xkw-row{display:grid;gap:4px 16px;padding:18px 22px;border-top:1px solid var(--line)}
.xkw-row:first-child{border-top:0}
@media (min-width:860px){.xkw-row{grid-template-columns:1fr 1.2fr 1.4fr;align-items:center}}
.xkw-row span:nth-child(1){font-weight:700}
.xkw-row span:nth-child(2){font-weight:700;color:var(--blue)}
.xkw-row span:nth-child(3){color:var(--muted);font-size:.9375rem}
.xkw-row--h{background:var(--ink);color:#fff}
.xkw-row--h span{font-size:.75rem!important;font-weight:700!important;letter-spacing:.08em;text-transform:uppercase;color:#D2D6DC!important}
@media (max-width:859px){.xkw-row--h{display:none}}

/* ---------- E-Ticaret: Shop-Baum ---------- */
.xstore{padding:24px}
.xstore-t{font-size:.8125rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-d);margin-bottom:16px}
.xstore-tree{display:grid;gap:10px}
.xs-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.xs-row--3{grid-template-columns:repeat(3,1fr)}
.xs-n{position:relative;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);font-size:.8125rem;font-weight:600;color:#E6E9ED}
.xs-n--root{justify-content:center;gap:12px;background:rgba(255,255,255,.1)}
.xs-n i{flex:none;width:20px;height:20px;border-radius:50%;border:2px solid rgba(255,255,255,.25);position:relative;animation:x-check 8s var(--ease) infinite}
.xs-n i::after{content:"";position:absolute;left:5px;top:2px;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);opacity:0;animation:x-tick 8s var(--ease) infinite}
.xs-row .xs-n:nth-child(1) i,.xs-row .xs-n:nth-child(1) i::after{animation-delay:.6s}
.xs-row .xs-n:nth-child(2) i,.xs-row .xs-n:nth-child(2) i::after{animation-delay:1.1s}
.xs-row--3 .xs-n:nth-child(1) i,.xs-row--3 .xs-n:nth-child(1) i::after{animation-delay:1.6s}
.xs-row--3 .xs-n:nth-child(2) i,.xs-row--3 .xs-n:nth-child(2) i::after{animation-delay:1.9s}
.xs-row--3 .xs-n:nth-child(3) i,.xs-row--3 .xs-n:nth-child(3) i::after{animation-delay:2.2s}
@keyframes x-check{0%,8%{background:transparent;border-color:rgba(255,255,255,.25)}14%,90%{background:#22A06B;border-color:#22A06B}100%{background:transparent;border-color:rgba(255,255,255,.25)}}
@keyframes x-tick{0%,8%{opacity:0}14%,90%{opacity:1}100%{opacity:0}}
.xstore-serp{display:grid;gap:4px;margin-top:16px;padding:16px;border-radius:16px;background:#fff;color:var(--ink);animation:x-ad 8s var(--ease) infinite;animation-delay:.4s}
.xstore-serp small{font-size:.75rem;color:var(--muted);font-weight:700}
.xstore-serp b{font-size:1rem;color:var(--blue)}
.xstore-serp span{font-size:.8125rem;color:#B07A00}

/* Drei Ebenen */
.xlayers{display:grid;gap:14px;max-width:960px}
.xlayer{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;padding:26px 28px;border-radius:var(--r3);background:var(--surface);border:1px solid var(--line)}
.xlayer:nth-child(2){margin-left:clamp(0px,4vw,48px)}
.xlayer:nth-child(3){margin-left:clamp(0px,8vw,96px);background:var(--dark);border-color:var(--dark);color:var(--on-dark)}
.xlayer-n{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--blue);color:#fff;font-weight:800;font-size:1.125rem}
.xlayer h3{font-size:1.25rem;letter-spacing:-.02em;margin-bottom:6px}
.xlayer p{color:var(--muted)}
.xlayer:nth-child(3) p{color:var(--muted-d)}
.pcards--6{display:grid;gap:16px}

/* ---------- Kurumsal: Browser ---------- */
.xbrowser{overflow:hidden;padding:0}
.xb-bar{display:flex;align-items:center;gap:6px;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.08)}
.xb-bar i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.2)}
.xb-bar span{flex:1;margin-left:10px;padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.06);font-size:.75rem;color:var(--muted-d)}
.xb-lang{font-size:.6875rem;font-weight:700;color:var(--blue-lt);letter-spacing:.06em}
.xb-nav{display:flex;align-items:center;gap:12px;padding:14px 18px;font-size:.6875rem;color:#C4C9D1;flex-wrap:wrap}
.xb-nav em{font-style:normal}
.xb-logo{width:46px;height:12px;border-radius:4px;background:#fff;margin-right:auto}
.xb-cta{padding:4px 10px;border-radius:999px;background:var(--blue);color:#fff}
.xb-hero{display:grid;gap:9px;padding:22px 18px 24px;margin:0 14px;border-radius:14px;background:radial-gradient(90% 120% at 100% 0%,rgba(0,102,178,.5),rgba(0,102,178,0) 60%),rgba(255,255,255,.04)}
.xb-hero i{display:block;height:10px;border-radius:6px;background:rgba(255,255,255,.18);transform-origin:left;animation:x-line 9s var(--ease) infinite}
.xb-h1{width:70%;height:16px!important;background:rgba(255,255,255,.55)!important}
.xb-p{width:88%}.xb-p--s{width:54%}
.xb-btn{width:96px;height:24px;margin-top:6px;border-radius:999px;background:var(--blue)}
.xb-mods{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding:14px}
.xb-mods span{display:flex;align-items:center;gap:8px;padding:12px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);font-size:.8125rem;font-weight:600;color:#E6E9ED;
  animation:x-pop 9s var(--ease) infinite}
.xb-mods span:nth-child(2){animation-delay:.2s}.xb-mods span:nth-child(3){animation-delay:.4s}.xb-mods span:nth-child(4){animation-delay:.6s}
.xb-mods svg{width:18px;height:18px;color:var(--blue-lt);flex:none}

/* Icon-Raster */
.xgrid{display:grid;gap:12px}
@media (min-width:640px){.xgrid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.xgrid{grid-template-columns:repeat(3,1fr)}}
.xgrid li{display:flex;align-items:center;gap:14px;padding:20px 22px;border-radius:var(--r2);background:var(--surface);border:1px solid var(--line);font-weight:700;line-height:1.3;transition:border-color .25s,transform .25s var(--ease)}
.xgrid li:hover{border-color:rgba(0,102,178,.45);transform:translateY(-2px)}
.xgrid svg{flex:none;width:28px;height:28px;color:var(--blue)}

/* ---------- SEO Danışmanlığı: Kreislauf ---------- */
.xcycle{aspect-ratio:1;max-width:460px;width:100%;margin-inline:auto;display:grid;place-items:center;--R:36%}
.xcycle-ring{position:absolute;inset:14%;border-radius:50%;border:2px dashed rgba(90,176,240,.4)}
.xcycle-core{position:relative;z-index:1;display:grid;justify-items:center;gap:2px;width:40%;aspect-ratio:1;align-content:center;border-radius:50%;background:var(--blue);color:#fff;text-align:center;box-shadow:0 0 0 10px rgba(0,102,178,.2)}
.xcycle-core b{font-size:clamp(.875rem,.8rem + .4vw,1.0625rem)}
.xcycle-core span{font-weight:800;color:#DCEBFA}
.xc-n{position:absolute;z-index:2;display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;background:#fff;color:var(--ink);font-weight:700;font-size:.875rem;white-space:nowrap;transform:translate(-50%,-50%);box-shadow:0 12px 30px -14px rgba(0,0,0,.5)}
.xc-n svg{width:16px;height:16px;color:var(--blue)}
.xc-n--1{left:50%;top:14%}.xc-n--2{left:86%;top:50%}.xc-n--3{left:50%;top:86%}.xc-n--4{left:14%;top:50%}
.xcycle-dot{position:absolute;inset:14%;border-radius:50%;animation:x-spin 8s linear infinite}
.xcycle-dot::before{content:"";position:absolute;left:50%;top:-7px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--blue-lt);box-shadow:0 0 16px var(--blue-lt)}
@keyframes x-spin{to{transform:rotate(360deg)}}
.xcycle .ac-pause{right:6px;bottom:6px}

/* Modelle */
.xmodels{display:grid;gap:16px}
@media (min-width:900px){.xmodels{grid-template-columns:repeat(3,1fr)}}
.xmodel{display:grid;gap:12px;align-content:start;padding:30px 28px;border-radius:var(--r3);background:var(--bg);border:1px solid var(--line)}
.xmodel--hi{background:var(--dark);border-color:var(--dark);color:var(--on-dark)}
.xmodel-ico{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:var(--surface);border:1px solid var(--line)}
.xmodel--hi .xmodel-ico{background:var(--blue);border-color:var(--blue)}
.xmodel-ico svg{width:24px;height:24px;color:var(--blue)}
.xmodel--hi .xmodel-ico svg{color:#fff}
.xmodel h3{font-size:1.25rem;letter-spacing:-.02em}
.xmodel p{color:var(--muted)}
.xmodel--hi p{color:var(--muted-d)}
.xmodel small{padding-top:12px;border-top:1px solid var(--line);font-size:.875rem;font-weight:600}
.xmodel--hi small{border-top-color:var(--line-d)}

/* Pause-Knopf im Visual */
.xchat .ac-pause,.xstore .ac-pause,.xbrowser .ac-pause{right:12px;bottom:12px}

@media (prefers-reduced-motion:reduce){
  .xchat *,.xtree *,.xstore *,.xbrowser *,.xcycle *{animation:none!important}
  .xchat-lines i,.xb-hero i{transform:none}
  .xs-n i::after{opacity:1}.xs-n i{background:#22A06B;border-color:#22A06B}
}