/* kenmedia.tr — GEO-Seite: eigene Visuals und Animationen (lädt nur auf geo.html) */

/* ---------- Hero ---------- */
.geo-hero{padding-bottom:64px}
@media (min-width:1024px){.geo-hero{padding-bottom:88px}}
.geo-stars{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.55;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%,#5AB0F0 50%,transparent 51%),radial-gradient(1px 1px at 28% 68%,#fff 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 46% 14%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 63% 42%,#5AB0F0 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 78% 76%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 88% 18%,#5AB0F0 50%,transparent 51%),
    radial-gradient(1px 1px at 8% 84%,#fff 50%,transparent 51%),radial-gradient(1.5px 1.5px at 55% 88%,#5AB0F0 50%,transparent 51%);
  animation:geo-twinkle 6s ease-in-out infinite alternate}
@keyframes geo-twinkle{from{opacity:.35}to{opacity:.75}}

.geo-qs{display:grid;gap:10px;margin-top:26px}
.geo-qs li{justify-self:start;max-width:100%;padding:12px 18px;border-radius:18px 18px 18px 6px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  color:#E6E9ED;font-weight:600;font-size:clamp(1rem,.95rem + .25vw,1.125rem);transition:background .4s,border-color .4s,transform .4s var(--ease),color .4s}
.geo-qs li:nth-child(2){margin-left:clamp(0px,3vw,32px)}.geo-qs li:nth-child(3){margin-left:clamp(0px,6vw,64px)}
.geo-qs li.is-on{background:rgba(0,102,178,.28);border-color:rgba(90,176,240,.6);color:#fff;transform:translateX(6px)}

/* KI-Chat */
.aichat-wrap{position:relative}
.aichat{position:relative;border-radius:var(--r3);overflow:hidden;background:linear-gradient(165deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);box-shadow:0 40px 100px -30px rgba(0,0,0,.7),0 0 0 1px rgba(90,176,240,.06);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.aichat::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;
  background:conic-gradient(from var(--ga,0deg),transparent 0 70%,rgba(90,176,240,.9) 80%,transparent 90%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:geo-spin 6s linear infinite}
@property --ga{syntax:"<angle>";initial-value:0deg;inherits:false}
@keyframes geo-spin{to{--ga:360deg}}
.ac-top{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.08);font-size:.8125rem;font-weight:600;color:var(--muted-d)}
.ac-dot{width:22px;height:22px;border-radius:50%;background:conic-gradient(from 0deg,#5AB0F0,#0066B2,#5AB0F0);box-shadow:0 0 16px rgba(90,176,240,.6);animation:geo-spin2 4s linear infinite}
@keyframes geo-spin2{to{transform:rotate(360deg)}}
.ac-body{display:grid;gap:18px;padding:22px 18px;min-height:300px;align-content:start}
.ac-q{justify-self:end;max-width:88%;padding:12px 16px;border-radius:18px 18px 6px 18px;background:var(--blue);color:#fff;font-weight:600;font-size:.9688rem;line-height:1.45;min-height:46px}
.ac-caret{display:inline-block;width:2px;height:1.05em;margin-left:2px;vertical-align:-2px;background:#fff;animation:geo-blink 1s steps(1) infinite}
@keyframes geo-blink{50%{opacity:0}}
.aichat:not(.is-typing) .ac-caret{display:none}
.ac-a{display:grid;gap:14px;max-width:94%}
.ac-think{display:none;gap:6px;padding:12px 16px;justify-self:start;border-radius:18px 18px 18px 6px;background:rgba(255,255,255,.07)}
.ac-think i{width:7px;height:7px;border-radius:50%;background:var(--blue-lt);animation:geo-dots 1s ease-in-out infinite}
.ac-think i:nth-child(2){animation-delay:.15s}.ac-think i:nth-child(3){animation-delay:.3s}
@keyframes geo-dots{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(-4px);opacity:1}}
.aichat.is-think .ac-think{display:flex}
.ac-lines{display:grid;gap:9px}
.ac-lines span{display:block;height:9px;border-radius:5px;background:linear-gradient(90deg,rgba(255,255,255,.28),rgba(255,255,255,.12));width:0;transition:width .9s var(--ease)}
.ac-lines span:nth-child(2){transition-delay:.15s}.ac-lines span:nth-child(3){transition-delay:.3s}.ac-lines span:nth-child(4){transition-delay:.45s}
.aichat.is-answer .ac-lines span{width:var(--w)}
.ac-src{display:grid;gap:8px;opacity:0;transform:translateY(8px);transition:opacity .5s .7s,transform .5s .7s var(--ease)}
.aichat.is-answer .ac-src{opacity:1;transform:none}
.ac-src small{font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-d)}
.ac-chips{display:flex;flex-wrap:wrap;gap:8px}
.ac-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;font-size:.8125rem;font-weight:600;color:#C4C9D1;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
.ac-chip--you{color:#fff;background:rgba(0,102,178,.35);border-color:var(--blue-lt);box-shadow:0 0 0 0 rgba(90,176,240,.6)}
.aichat.is-answer .ac-chip--you{animation:geo-ping 1.6s 1.2s ease-out 2}
@keyframes geo-ping{0%{box-shadow:0 0 0 0 rgba(90,176,240,.6)}100%{box-shadow:0 0 0 14px rgba(90,176,240,0)}}
.ac-chip svg{width:14px;height:14px;color:var(--blue-lt)}
.ac-input{display:flex;align-items:center;justify-content:space-between;margin:0 18px 18px;padding:12px 16px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);font-size:.875rem;color:var(--muted-d)}
.ac-input i{width:26px;height:26px;border-radius:50%;background:var(--blue)}
@media (max-width:1079px){.aichat-wrap{max-width:560px}}

/* GEO-Definition */
.geo-def{position:relative;display:grid;gap:24px;margin-top:64px;padding:32px 28px;border-radius:var(--r4);
  background:linear-gradient(135deg,rgba(0,102,178,.22),rgba(255,255,255,.03) 55%);border:1px solid rgba(90,176,240,.25)}
@media (min-width:1024px){.geo-def{grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:48px;padding:40px 48px}}
.geo-def-term b{display:block;font-size:clamp(3rem,2rem + 4vw,5rem);font-weight:800;letter-spacing:-.05em;line-height:.9;
  background:linear-gradient(120deg,#fff 20%,#5AB0F0 80%);-webkit-background-clip:text;background-clip:text;color:transparent}
.geo-def-term span{display:block;margin-top:8px;font-size:.8125rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-d)}
.geo-def-txt{display:grid;gap:12px;max-width:64ch}
.geo-def-txt p{color:#D2D6DC;line-height:1.65}
.geo-def-txt p:first-child{color:#fff;font-weight:600}
.geo-def-act{display:flex;flex-wrap:wrap;gap:12px}
@media (min-width:1024px){.geo-def-act{flex-direction:column}}

/* ---------- Kurze Suche vs. ausführliche Frage ---------- */
.qcompare{display:grid;gap:16px;align-items:center;margin-bottom:24px}
@media (min-width:960px){.qcompare{grid-template-columns:minmax(0,.8fr) auto minmax(0,1.4fr)}}
.qc{display:grid;gap:12px;padding:24px;border-radius:var(--r3);background:var(--surface);border:1px solid var(--line)}
.qc small{font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.qc-box{display:flex;gap:12px;align-items:flex-start;padding:14px 18px;border-radius:16px;background:var(--bg);border:1px solid var(--line);font-weight:600;line-height:1.5}
.qc-box svg{flex:none;width:20px;height:20px;margin-top:2px;color:var(--muted)}
.qc p{font-size:.875rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px}
.qc--old{opacity:.8}
.qc--new{border-color:rgba(0,102,178,.35);box-shadow:0 20px 50px -30px rgba(0,102,178,.45)}
.qc--new .qc-box{background:var(--blue-soft);border-color:rgba(0,102,178,.25)}
.qc--new .qc-box svg{color:var(--blue)}
.qc--new p b{padding:4px 10px;border-radius:999px;background:var(--ink);color:#fff;font-size:.75rem;font-weight:700}
.qc-arrow{justify-self:center;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:#fff}
.qc-arrow svg{width:20px;height:20px}
@media (max-width:959px){.qc-arrow{transform:rotate(90deg)}}
.qc-cursor::after{content:"";display:inline-block;width:2px;height:1em;margin-left:2px;vertical-align:-2px;background:var(--blue);animation:geo-blink 1s steps(1) infinite}

/* ---------- Wie GEO funktioniert: Karte mit Kern ---------- */
.geo-how{position:relative;overflow:hidden}
.geo-map{display:grid;gap:16px}
.geo-core{position:relative;justify-self:center;width:min(360px,80vw);aspect-ratio:1}
.geo-core svg{width:100%;height:100%;overflow:visible}
.gc-ring{fill:none;stroke:rgba(90,176,240,.22);stroke-width:1;stroke-dasharray:4 8;transform-origin:200px 200px;animation:geo-spin2 40s linear infinite}
.gc-ring--2{animation-direction:reverse;animation-duration:28s}
.gc-path{fill:none;stroke:rgba(255,255,255,.12);stroke-width:2}
.gc-flow{fill:none;stroke:#5AB0F0;stroke-width:3;stroke-linecap:round;stroke-dasharray:28 400;stroke-dashoffset:428;filter:drop-shadow(0 0 6px #5AB0F0);animation:geo-flow 3.2s ease-in infinite}
.gc-flow--2{animation-delay:.8s}.gc-flow--3{animation-delay:1.6s}.gc-flow--4{animation-delay:2.4s}
@keyframes geo-flow{0%{stroke-dashoffset:428;opacity:0}10%{opacity:1}80%{opacity:1}100%{stroke-dashoffset:0;opacity:0}}
.gc-node{fill:var(--dark);stroke:#5AB0F0;stroke-width:2.5}
.gc-center{fill:var(--blue);stroke:#5AB0F0;stroke-width:2}
.gc-pulse{fill:none;stroke:#5AB0F0;stroke-width:2;transform-origin:200px 200px;animation:geo-pulse 3.2s ease-out infinite}
@keyframes geo-pulse{0%{transform:scale(1);opacity:.8}100%{transform:scale(2.2);opacity:0}}
.gc-label{position:absolute;inset:0;display:grid;place-content:center;text-align:center;pointer-events:none}
.gc-label b{font-size:1rem;color:#fff}
.gc-label span{font-size:.6875rem;line-height:1.3;color:#D2E8F8}
@media (min-width:1080px){
  .geo-map{grid-template-columns:1fr minmax(300px,380px) 1fr;grid-template-rows:auto auto;gap:24px 32px;align-items:center}
  .gp--1{grid-column:1;grid-row:1}.gp--2{grid-column:3;grid-row:1}
  .gp--3{grid-column:1;grid-row:2}.gp--4{grid-column:3;grid-row:2}
  .geo-core{grid-column:2;grid-row:1/3;width:100%}
}
@media (max-width:1079px){.geo-core{order:-1;margin-bottom:8px}}

/* ---------- Beispiel ---------- */
.geo-ex{display:grid;gap:20px}
.gx-q{justify-self:center;display:flex;align-items:center;gap:12px;padding:16px 24px;border-radius:999px;background:var(--ink);color:#fff;font-weight:700;font-size:clamp(1rem,.95rem + .3vw,1.1875rem);box-shadow:0 20px 40px -24px rgba(11,12,16,.6);text-align:left}
.gx-q svg{flex:none;width:22px;height:22px;color:var(--blue-lt)}
.gx-pages{position:relative;display:grid;gap:16px}
@media (min-width:860px){.gx-pages{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}}
.gx-page{display:grid;gap:16px;align-content:start;padding:28px;border-radius:var(--r3);border:1px solid var(--line);background:var(--bg)}
.gx-tag{justify-self:start;display:inline-flex;align-items:center;gap:8px;padding:5px 12px;border-radius:999px;font-size:.75rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.gx-page--weak .gx-tag{background:#ECEDEF;color:var(--muted)}
.gx-page--weak .gx-tag::before{content:"✕"}
.gx-page--strong .gx-tag{background:var(--blue);color:#fff}
.gx-page--strong .gx-tag::before{content:"✓"}
.gx-mock{display:grid;gap:10px;padding:22px;border-radius:16px;background:var(--surface);border:1px dashed var(--line-2)}
.gx-h{font-weight:800;font-size:1.125rem;color:var(--muted)}
.gx-l{height:9px;width:70%;border-radius:5px;background:var(--line)}.gx-l--s{width:45%}
.gx-page--weak{filter:grayscale(1)}
.gx-page--strong{background:var(--surface);border-color:rgba(0,102,178,.35);box-shadow:0 24px 60px -36px rgba(0,102,178,.5)}
.gx-list{display:grid;gap:10px}
.gx-list li{display:flex;gap:12px;align-items:center;padding:14px 16px;border-radius:14px;background:var(--blue-soft);font-weight:700;line-height:1.35}
.gx-list svg{flex:none;width:20px;height:20px;color:var(--blue)}
.gx-cap{color:var(--muted);font-size:.9688rem}
.gx-out{max-width:820px;justify-self:center;text-align:center;font-size:clamp(1.0625rem,1rem + .3vw,1.25rem);color:var(--muted)}
.gx-out strong{display:block;margin-top:10px;color:var(--ink)}


/* ---------- Pause / reduzierte Bewegung ---------- */
.geo-paused main *,.geo-paused main *::before,.geo-paused main *::after{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){
  .geo-stars,.aichat::before,.ac-dot,.gc-ring,.gc-flow,.gc-pulse,.ac-think i{animation:none!important}
  .gc-flow{opacity:0}
}
@media (max-width:767px){.ac-body{min-height:250px}}