/* Kartlar — araç kartları 3D cam karusel olarak; kart tıklanınca paneli aynı pencerede açılır (SocialPulsar cam tasarım dili, --glass-* tokenları).
   Kartlar kendi bulanıklığını kullanmaz (3D dönüşümde backdrop-filter bozulur); pencerenin camının üstünde yarı saydam yüzeylerdir. */
.cards-window[hidden],.ai-workspace:not([data-view="cards"]) .cards-window{display:none!important}
.cards-window{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;min-width:0;height:calc(100dvh - 40px);margin:20px 20px 20px 14px;padding:18px 26px 22px;overflow:hidden;
  border-radius:var(--radius-window);background:var(--glass-bg);backdrop-filter:var(--glass-filter);-webkit-backdrop-filter:var(--glass-filter);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);color:var(--on-glass);
  font-family:InterSP,Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif}
.cards-window svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cards-window button{font:inherit;color:inherit}

/* başlık */
.cards-head{grid-column:1/-1;display:flex;align-items:center;gap:12px;padding:0 4px 4px 6px;min-width:0}
.cards-back{display:none}
.cards-home{display:grid;place-items:center;flex:none;width:52px;height:52px;padding:0;border:1px solid var(--glass-inner-border);border-radius:50%;background:var(--glass-inner);box-shadow:inset 0 1px 0 rgba(255,255,255,.14);color:var(--on-glass-2);cursor:pointer;transition:background .2s,color .2s,transform .2s,box-shadow .2s}
.cards-home svg{width:20px;height:20px}
.cards-home:hover{background:var(--glass-chip-hover);color:#fff}
.cards-home:active{transform:scale(.94)}
.cards-home[aria-pressed="true"]{background:rgba(255,255,255,.92);border-color:transparent;color:#2a2b33;box-shadow:0 8px 18px -8px rgba(0,0,0,.4)}
.cards-heading{min-width:0}
.cards-heading h1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cards-heading h1{margin:0;font-family:Jost,InterSP,Inter,"PingFang SC","Microsoft YaHei",sans-serif;font-size:26px;font-weight:500;letter-spacing:.01em;line-height:1.1}
.cards-heading p{margin:4px 0 0;font-size:13px;color:var(--on-glass-3)}

/* sahne */
.cards-stage{grid-row:2;grid-column:1;position:relative;min-height:0;outline:0;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab}
.cards-stage.dragging{cursor:grabbing}
.cards-stage:focus-visible{outline:0}
.cards-stage:focus-visible .gcard.is-active{box-shadow:0 0 0 2px rgba(255,255,255,.75),0 40px 80px -26px rgba(8,10,9,.6)}
.cards-track{position:absolute;inset:0;perspective:1700px;perspective-origin:50% 45%;transform-style:flat}
.cards-window{--cw:clamp(236px,24vw,330px);--ch:calc(var(--cw) * 1.42)}

/* kart */
.gcard{position:absolute;left:50%;top:50%;width:var(--cw);height:var(--ch);margin:calc(var(--ch) / -2) 0 0 calc(var(--cw) / -2);display:flex;flex-direction:column;overflow:hidden;border-radius:28px;
  background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.06) 58%,rgba(255,255,255,.04)),linear-gradient(170deg,color-mix(in srgb,var(--a2,#4b55c9) 62%,#1a1430),color-mix(in srgb,var(--a1,#7f8cff) 34%,#120f24));border:1px solid rgba(255,255,255,.28);
  box-shadow:0 30px 60px -24px rgba(8,10,9,.55),inset 0 1px 0 rgba(255,255,255,.45);
  transform-origin:50% 50%;will-change:transform,opacity;backface-visibility:hidden;cursor:pointer;
  transition:transform .8s cubic-bezier(.2,.8,.2,1),opacity .6s ease,box-shadow .6s ease}
.cards-stage.dragging .gcard{transition:none}
.gcard::after{content:"";position:absolute;inset:0;border-radius:inherit;background:rgba(14,16,15,var(--dim,0));pointer-events:none;transition:background .6s ease}
.gcard.is-active{cursor:default;box-shadow:0 40px 80px -26px rgba(8,10,9,.6),inset 0 1px 0 rgba(255,255,255,.55);border-color:rgba(255,255,255,.42)}
.gcard.is-gone{opacity:0!important;pointer-events:none}

.gcard-media{position:relative;flex:0 0 57%;overflow:hidden;border-radius:27px 27px 0 0}
.gcard-media img{position:absolute;inset:-6% -8%;width:116%;height:112%;object-fit:cover;transform:translateX(var(--par,0px)) scale(1.02);transition:transform .9s cubic-bezier(.2,.8,.2,1);
  -webkit-mask-image:linear-gradient(180deg,#000 62%,transparent 100%);mask-image:linear-gradient(180deg,#000 62%,transparent 100%)}
.cards-stage.dragging .gcard-media img{transition:none}
.gcard-art{position:absolute;inset:0;display:flex;align-items:center;padding:22px 24px 34px;-webkit-mask-image:linear-gradient(180deg,#000 66%,transparent 100%);mask-image:linear-gradient(180deg,#000 66%,transparent 100%)}
.gcard-art blockquote{margin:0;font-family:Jost,InterSP,Inter,"PingFang SC","Microsoft YaHei",sans-serif;font-size:19px;line-height:1.35;font-weight:500;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.25);display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.gcard-art::before{content:"“";position:absolute;top:2px;left:16px;font-family:Jost,serif;font-size:76px;line-height:1;color:rgba(255,255,255,.35)}
.gcard-shine{position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.28) 46%,transparent 60%);transform:translateX(-120%);pointer-events:none}
.gcard.is-active .gcard-shine{animation:cardShine 1.4s .25s ease both}
@keyframes cardShine{to{transform:translateX(120%)}}

.gcard-top{position:absolute;top:12px;left:12px;right:12px;display:flex;justify-content:space-between;align-items:center;opacity:0;transform:translateY(-6px);transition:opacity .4s ease,transform .4s ease;z-index:2}
.gcard.is-active .gcard-top{opacity:1;transform:none;transition-delay:.25s}
.gcard-chip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px 0 9px;border:1px solid rgba(255,255,255,.35);border-radius:15px;background:rgba(255,255,255,.2);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;font-size:12px;cursor:pointer}
.cards-window .gcard-chip{font-size:12px}
.gcard-chip svg{width:14px;height:14px}
.gcard-more{width:30px;padding:0;justify-content:center}
.gcard-chip:hover{background:rgba(255,255,255,.32)}
.gcard-dot{position:absolute;left:50%;bottom:12px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#fff;opacity:0;box-shadow:0 0 0 4px rgba(255,255,255,.18);transition:opacity .4s ease}
.gcard.is-active .gcard-dot{opacity:1}

.gcard-body{position:relative;flex:1;display:flex;flex-direction:column;min-height:0;padding:4px 20px 18px}
.gcard-title{display:flex;align-items:baseline;gap:10px}
.gcard-title h3{flex:1;min-width:0;margin:0;font-family:Jost,InterSP,Inter,"PingFang SC","Microsoft YaHei",sans-serif;font-size:19px;font-weight:600;letter-spacing:.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gcard-count{font-size:12px;color:var(--on-glass-3);font-variant-numeric:tabular-nums}
.gcard-text{margin:8px 0 0;font-size:13px;line-height:1.5;color:var(--on-glass-2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.gcard-text:empty{display:none}
.gcard-meta{margin-top:auto;padding-top:10px;border-top:1px solid rgba(255,255,255,.14);display:grid;gap:4px;font-size:11.5px;color:var(--on-glass-3)}
.gcard-meta span{display:flex;align-items:center;gap:6px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gcard-meta svg{width:13px;height:13px;flex:none}
.gcard-meta b{font-weight:400;display:inline-flex;align-items:center;min-width:0;overflow:hidden;text-overflow:ellipsis}
.gcard-meta .liked{color:#ff8a95;margin-left:4px}
.gcard-meta .liked svg{fill:currentColor}
/* yalnız ortadaki kartın içeriği görünür; yanlarda sadece başlık */
.gcard:not(.is-active) .gcard-text,.gcard:not(.is-active) .gcard-meta,.gcard:not(.is-active) .gcard-count{opacity:0;transform:translateY(8px)}
.gcard .gcard-text,.gcard .gcard-meta,.gcard .gcard-count{transition:opacity .45s ease,transform .45s ease}
.gcard.is-active .gcard-text{transition-delay:.18s}.gcard.is-active .gcard-meta{transition-delay:.26s}
.gcard:not(.is-active) .gcard-title h3{font-size:16px}

/* alt oynatıcı hapı */
.cards-dock{grid-row:3;grid-column:1;justify-self:center;position:relative;display:flex;align-items:center;gap:8px;width:min(560px,100%);height:62px;margin-top:6px;padding:0 9px;border-radius:31px;overflow:hidden;
  background:var(--glass-inner);border:1px solid var(--glass-inner-border);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 16px 34px -20px rgba(0,0,0,.45);z-index:3}
.dock-btn{display:grid;place-items:center;flex:none;width:40px;height:40px;border:1px solid rgba(255,255,255,.18);border-radius:50%;background:var(--glass-chip);cursor:pointer;transition:background .2s,transform .15s}
.dock-btn:hover{background:var(--glass-chip-hover)}
.dock-btn:active{transform:scale(.94)}
.dock-btn svg{width:17px;height:17px}
#cardsPlay .i-play{fill:currentColor;stroke:none;width:15px;height:15px;margin-left:2px}
#cardsPlay .i-pause{display:none;stroke-width:2.4}
#cardsPlay[aria-pressed="true"] .i-play{display:none}
#cardsPlay[aria-pressed="true"] .i-pause{display:block}
.dock-thumb{flex:none;width:40px;height:40px;border-radius:50%;overflow:hidden;background:linear-gradient(135deg,var(--a1,#7f8cff),var(--a2,#4b55c9));display:grid;place-items:center;color:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.55)}
.dock-thumb svg{width:20px;height:20px}
.dock-info{flex:1;min-width:0;display:grid;gap:1px;padding:0 4px}
.dock-title{display:flex;align-items:center;gap:8px;min-width:0}
.dock-title strong{min-width:0;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dock-title em{flex:none;height:18px;padding:0 7px;border-radius:9px;background:rgba(255,255,255,.18);font-size:10.5px;font-style:normal;line-height:18px;color:var(--on-glass-2)}
.dock-title em:empty{display:none}
.dock-info small{font-size:12px;color:var(--on-glass-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dock-progress{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--edge);transform-origin:0 50%;transform:scaleX(0);opacity:0}
.cards-dock.playing .dock-progress{opacity:.9;animation:dockProgress var(--cards-interval,4200ms) linear both}
@keyframes dockProgress{to{transform:scaleX(1)}}
.cards-dock[hidden]{display:none}
.cards-window .dock-open{background:rgba(255,255,255,.92);border-color:transparent;color:#2a2b33}
.cards-window .dock-open:hover{background:#fff}
.cards-window.single #cardsPrev,.cards-window.single #cardsNext,.cards-window.single #cardsPlay{display:none}
.cards-window.single .dock-info{padding-left:2px}

/* boş durum */
.cards-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:24px}
.cards-empty[hidden]{display:none}
.cards-empty-icon{display:grid;place-items:center;width:72px;height:72px;border-radius:24px;background:var(--glass-chip);border:1px solid rgba(255,255,255,.22)}
.cards-empty-icon svg{width:30px;height:30px}
.cards-empty h2{margin:6px 0 0;font-family:Jost,InterSP,Inter,"PingFang SC","Microsoft YaHei",sans-serif;font-size:22px;font-weight:500}
.cards-empty p{margin:0;max-width:340px;color:var(--on-glass-2);font-size:14px;line-height:1.5}
.cards-window .primary-pill{display:inline-flex;align-items:center;gap:8px;height:44px;margin-top:8px;padding:0 24px;border:0;border-radius:22px;background:rgba(255,255,255,.92);color:#2a2b33;font-size:14.5px;font-weight:500;cursor:pointer}

/* araç kartı görseli */
.tool-art{background:radial-gradient(120% 90% at 20% 10%,color-mix(in srgb,var(--a1) 85%,#fff 15%),transparent 60%),linear-gradient(150deg,var(--a1),var(--a2));
  -webkit-mask-image:linear-gradient(180deg,#000 70%,transparent 100%);mask-image:linear-gradient(180deg,#000 70%,transparent 100%)}
.tool-orb{position:absolute;width:62%;aspect-ratio:1;right:-14%;top:-18%;border-radius:50%;background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.45),rgba(255,255,255,0) 70%);transform:translateX(var(--par,0px));transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.tool-orb-2{width:44%;left:-12%;right:auto;top:auto;bottom:4%;opacity:.55;transform:translateX(calc(var(--par,0px) * -1))}
.cards-stage.dragging .tool-orb{transition:none}
.tool-glyph{position:absolute;left:50%;top:47%;display:grid;place-items:center;width:42%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:30%;color:#fff;
  background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.45);box-shadow:0 18px 40px -16px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.6)}
.tool-glyph svg{width:52%;height:52%;stroke-width:1.5}
.gcard.is-active .tool-glyph{animation:glyphIn .9s .1s cubic-bezier(.2,.8,.2,1) both}
@keyframes glyphIn{from{transform:translate(-50%,-44%) scale(.9);opacity:.6}}
.tool-status{cursor:default;pointer-events:none}
.tool-status b,.cp-status b{font-weight:500}
.tool-status.is-ready svg,.cp-status.is-ready svg{color:#8ef0b5}
.tool-card .gcard-text{-webkit-line-clamp:3}

/* kart paneli (aynı pencerede) */
.cards-window[data-mode="panel"] .cards-stage,.cards-window[data-mode="panel"] .cards-dock{display:none}
.cards-panel{grid-row:2/4;grid-column:1;min-height:0;display:flex;margin-top:10px;animation:panelIn .5s cubic-bezier(.2,.8,.2,1) both}
.cards-panel[hidden]{display:none}
.cp-box{position:relative;flex:1;min-height:0;overflow:auto;border-radius:30px;background:var(--glass-inner);border:1px solid var(--glass-inner-border);box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
.cp-box::before{content:"";position:absolute;inset:0 0 auto;height:180px;border-radius:30px 30px 0 0;background:radial-gradient(70% 100% at 50% 0,color-mix(in srgb,var(--a1) 45%,transparent),transparent 75%);opacity:.55;pointer-events:none}
.cp-soon{position:relative;min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:36px 24px;text-align:center}
.cp-glyph{display:grid;place-items:center;width:96px;height:96px;margin-bottom:6px;border-radius:30px;color:#fff;background:linear-gradient(150deg,var(--a1),var(--a2));border:1px solid rgba(255,255,255,.45);box-shadow:0 24px 50px -22px var(--a2),inset 0 1px 0 rgba(255,255,255,.55);animation:glyphFloat 4s ease-in-out infinite}
.cp-glyph svg{width:48px;height:48px;stroke-width:1.5}
@keyframes glyphFloat{50%{transform:translateY(-6px)}}
.cp-status{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px 0 9px;border-radius:14px;background:var(--glass-chip);border:1px solid rgba(255,255,255,.22);font-size:12px;color:var(--on-glass-2)}
.cp-status svg{width:14px;height:14px}
.cp-soon h2{margin:4px 0 0;font-family:Jost,InterSP,Inter,"PingFang SC","Microsoft YaHei",sans-serif;font-size:26px;font-weight:500}
.cp-desc{margin:0;max-width:460px;font-size:15px;line-height:1.55;color:var(--on-glass-2)}
.cp-note{margin:0;max-width:420px;font-size:13px;line-height:1.5;color:var(--on-glass-3)}
.cp-back svg{width:17px;height:17px}
@keyframes panelIn{from{opacity:0;transform:translateY(16px) scale(.985)}}

/* sidebar ve mobil giriş */
@media(min-width:901px){.home-top .home-cards{display:none}}
@media(max-width:900px){
  .cards-window{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;height:100dvh;margin:0;padding:max(8px,env(safe-area-inset-top)) 0 max(12px,env(safe-area-inset-bottom));border-radius:0;border:0;box-shadow:none;--cw:min(66vw,300px)}
  .cards-head{padding:0 14px}
  .cards-back{display:inline-flex;align-items:center;gap:2px;height:34px;padding:0 12px 0 6px;border:0;border-radius:17px;background:rgba(255,255,255,.16);font-size:14px;cursor:pointer}
  .cards-back svg{width:20px;height:20px}
  .cards-heading h1{font-size:20px}
  .cards-heading p{display:none}
  .cards-head{gap:8px}
  .cards-home{width:40px;height:40px}
  .cards-home svg{width:18px;height:18px}
  .cards-track{perspective:1100px}
  .gcard-media{flex-basis:52%}
  .gcard-text{-webkit-line-clamp:2}
  .gcard-body{padding:4px 16px 14px}
  .cards-panel{margin:8px 12px 0}
  .cp-box{border-radius:24px}
  .cards-dock{grid-row:3;grid-column:1;width:calc(100% - 24px);height:58px;gap:6px;padding:0 7px}
  .dock-btn{width:38px;height:38px}
  .dock-thumb{display:none}
}
@media(max-width:380px){#cardsPrev,#cardsNext{display:none}}
@media(min-width:901px) and (max-height:800px){.cards-window{--cw:clamp(230px,22vw,300px)}.gcard-text{-webkit-line-clamp:2}.gcard-body{padding-bottom:14px}}
@media(prefers-reduced-motion:reduce){
  .gcard,.gcard-media img,.gcard::after,.tool-orb{transition-duration:.01ms!important}
  .cards-panel,.cp-glyph,.gcard.is-active .tool-glyph{animation:none}
  .gcard.is-active .gcard-shine,.cards-dock.playing .dock-progress{animation:none}
}
.cards-toast{bottom:96px}

/* görselli kart: görsel tüm kartı kaplar, yazı alanına doğru siyaha kararır (yazılar her temada beyaz ve okunur) */
.gcard.has-bg{background:#0b0b10}
.gcard-bg{position:absolute;top:0;left:-6%;width:112%;height:100%;object-fit:cover;object-position:50% 16%;transform:translateX(var(--par,0px));transition:transform .9s cubic-bezier(.2,.8,.2,1);pointer-events:none;user-select:none;-webkit-user-drag:none}
.cards-stage.dragging .gcard-bg{transition:none}
.gcard-fade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.22) 0%,rgba(0,0,0,0) 18%,rgba(0,0,0,0) 38%,rgba(0,0,0,.5) 52%,rgba(0,0,0,.84) 66%,rgba(0,0,0,.94) 82%,#000 100%)}
.gcard.has-bg .gcard-media,.gcard.has-bg .gcard-body{z-index:1}
.gcard.has-bg::after{z-index:3}
.gcard.has-bg .tool-art{background:none;-webkit-mask-image:none;mask-image:none}
.gcard.has-bg .tool-orb,.gcard.has-bg .tool-glyph{display:none}
.gcard.has-bg .gcard-body{color:#fff}
.gcard.has-bg .gcard-title h3{text-shadow:0 2px 14px rgba(0,0,0,.7)}
.gcard.has-bg .gcard-count{color:rgba(255,255,255,.7)}
.gcard.has-bg .gcard-text{color:rgba(255,255,255,.88);text-shadow:0 1px 8px rgba(0,0,0,.5)}
.gcard.has-bg .gcard-meta{color:rgba(255,255,255,.72);border-top-color:rgba(255,255,255,.18)}
.cards-window .gcard.has-bg .gcard-chip,html[data-theme] .cards-window .gcard.has-bg .gcard-chip{color:#fff;background:rgba(0,0,0,.34);border-color:rgba(255,255,255,.38)}
.cards-window .gcard.has-bg .gcard-chip:hover,html[data-theme] .cards-window .gcard.has-bg .gcard-chip:hover{background:rgba(0,0,0,.5)}