/* WebTibo v3 — hareketli ikonlar, yeni kartlar, sayfalama, mobil kart destesi, Atölye & Kod temaları */

/* ============ 1) HAREKETLİ İKONLAR (üzerine gelince oynar) ============ */
.ico{overflow:visible;transform-box:fill-box}
.ico *{transform-box:fill-box;transform-origin:center}
:where(a,button,.btn,label,.ai-h,summary,.post-card,.prod):hover>.ico,
:where(a,button,.btn,label,.ai-h,summary,.post-card,.prod):hover :where(.ico),
.ico.ai-play{--ai:1}
@media (prefers-reduced-motion:no-preference){
:where(a,button,summary,.post-card,.prod,.ai-h):hover .ico-arrow,.ico-arrow.ai-play{animation:aiArrow .7s var(--ease,ease) both}
:where(a,button,summary,.post-card,.prod,.ai-h):hover .ico-arrow-ur,.ico-arrow-ur.ai-play{animation:aiArrowUr .7s ease both}
:where(a,button,summary,.ai-h):hover .ico-search,.ico-search.ai-play{animation:aiSearch .9s ease both}
:where(a,button,summary,.ai-h):hover .ico-cart,.ico-cart.ai-play{animation:aiCart .8s ease both}
:where(a,button,summary,.ai-h):hover .ico-bolt,.ico-bolt.ai-play{animation:aiBolt .6s ease both}
:where(a,button,summary,.ai-h):hover .ico-shield path:last-child,.ico-shield.ai-play path:last-child{stroke-dasharray:14;animation:aiDraw .7s ease both}
:where(a,button,summary,.ai-h):hover .ico-check path,.ico-check.ai-play path{stroke-dasharray:24;animation:aiDraw .55s ease both}
:where(a,button,summary,.ai-h):hover .ico-chart path:last-child,.ico-chart.ai-play path:last-child{stroke-dasharray:30;animation:aiDraw .9s ease both}
:where(a,button,summary,.ai-h):hover .ico-refresh,.ico-refresh.ai-play{animation:aiSpin .8s cubic-bezier(.5,0,.3,1) both}
:where(a,button,summary,.ai-h):hover .ico-sun,.ico-sun.ai-play{animation:aiSpin 1s ease both}
:where(a,button,summary,.ai-h):hover .ico-moon,.ico-moon.ai-play{animation:aiMoon .9s ease both}
:where(a,button,summary,.ai-h):hover .ico-phone,.ico-phone.ai-play,:where(a,button,summary,.ai-h):hover .ico-wa{animation:aiRing .8s ease both}
:where(a,button,summary,.ai-h):hover .ico-mail,.ico-mail.ai-play{animation:aiMail .7s ease both}
:where(a,button,summary,.ai-h):hover .ico-send,.ico-send.ai-play{animation:aiSend .8s ease both}
:where(a,button,summary,.ai-h):hover .ico-star,.ico-star.ai-play{animation:aiStar .8s ease both}
:where(a,button,summary,.ai-h):hover .ico-sparkle,.ico-sparkle.ai-play{animation:aiSpark .9s ease both}
:where(a,button,summary,.ai-h):hover .ico-user,.ico-user.ai-play{animation:aiNod .7s ease both}
:where(a,button,summary,.ai-h):hover .ico-chat,.ico-chat.ai-play{animation:aiBubble .7s ease both}
:where(a,button,summary,.ai-h):hover .ico-box,.ico-box.ai-play{animation:aiBounce .7s ease both}
:where(a,button,summary,.ai-h):hover .ico-clock,.ico-clock.ai-play{animation:aiSpin 1.2s linear both}
:where(a,button,summary,.ai-h):hover .ico-x,.ico-x.ai-play{animation:aiX .45s ease both}
:where(a,button,summary,.ai-h):hover .ico-menu,.ico-menu.ai-play{animation:aiMenu .6s ease both}
:where(a,button,summary,.ai-h):hover .ico-code,.ico-code.ai-play{animation:aiCode .7s ease both}
:where(a,button,summary,.ai-h):hover .ico-plug,.ico-plug.ai-play{animation:aiPlug .7s ease both}
:where(a,button,summary,.ai-h):hover .ico-layout,.ico-layout.ai-play{animation:aiPop .6s ease both}
:where(a,button,summary,.ai-h):hover .ico-ticket,.ico-ticket.ai-play{animation:aiTicket .7s ease both}
}
@keyframes aiArrow{0%{transform:none}40%{transform:translateX(5px)}41%{transform:translateX(-7px);opacity:0}42%{opacity:1}100%{transform:none}}
@keyframes aiArrowUr{0%{transform:none}40%{transform:translate(4px,-4px);opacity:0}41%{transform:translate(-4px,4px);opacity:0}100%{transform:none;opacity:1}}
@keyframes aiSearch{0%,100%{transform:none}25%{transform:translate(-2px,-2px) rotate(-10deg)}50%{transform:translate(2px,-1px) rotate(8deg)}75%{transform:translate(-1px,1px)}}
@keyframes aiCart{0%,100%{transform:none}30%{transform:translateX(4px) rotate(-6deg)}60%{transform:translateX(-2px) rotate(3deg)}}
@keyframes aiBolt{0%,100%{transform:none;opacity:1}20%{opacity:.2}35%{opacity:1;transform:scale(1.15)}50%{opacity:.4}65%{opacity:1}}
@keyframes aiDraw{from{stroke-dashoffset:var(--dl,30)}to{stroke-dashoffset:0}}
@keyframes aiSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes aiMoon{0%,100%{transform:none}30%{transform:rotate(-22deg)}60%{transform:rotate(12deg)}}
@keyframes aiRing{0%,100%{transform:none}15%,45%,75%{transform:rotate(-14deg)}30%,60%{transform:rotate(14deg)}}
@keyframes aiMail{0%,100%{transform:none}35%{transform:translateY(-3px) scale(1.06)}60%{transform:translateY(1px)}}
@keyframes aiSend{0%{transform:none}45%{transform:translate(8px,-8px);opacity:0}46%{transform:translate(-8px,8px);opacity:0}100%{transform:none;opacity:1}}
@keyframes aiStar{0%,100%{transform:none}40%{transform:scale(1.25) rotate(72deg)}70%{transform:scale(.95) rotate(72deg)}}
@keyframes aiSpark{0%,100%{transform:none}50%{transform:scale(.7) rotate(45deg)}}
@keyframes aiNod{0%,100%{transform:none}40%{transform:translateY(-3px)}70%{transform:translateY(1px)}}
@keyframes aiBubble{0%,100%{transform:none}30%{transform:scale(1.12) rotate(-6deg)}60%{transform:scale(.96) rotate(3deg)}}
@keyframes aiBounce{0%,100%{transform:none}30%{transform:translateY(-5px)}55%{transform:translateY(0) scaleY(.9)}75%{transform:translateY(-2px)}}
@keyframes aiX{0%{transform:none}100%{transform:rotate(90deg)}}
@keyframes aiMenu{0%,100%{transform:none}50%{transform:scaleX(.7)}}
@keyframes aiCode{0%,100%{transform:none}30%{transform:scaleX(1.18)}60%{transform:scaleX(.94)}}
@keyframes aiPlug{0%,100%{transform:none}40%{transform:translateY(-4px)}60%{transform:translateY(1px)}}
@keyframes aiPop{0%,100%{transform:none}40%{transform:scale(.82)}70%{transform:scale(1.08)}}
@keyframes aiTicket{0%,100%{transform:none}30%{transform:rotate(-12deg) scale(1.08)}60%{transform:rotate(6deg)}}
/* ekrana girince bir kez oynat (v3.js .ai-play ekler) */
.btn .ico{transition:none}.btn:hover .ico{transform:none}

/* ============ 2) BLOG KARTLARI (aicanvas tarzı) ============ */
.posts.v3{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:22px!important}
.posts.v3 .post-card{position:relative;display:flex;flex-direction:column;gap:0;padding:8px!important;border:1px solid var(--line)!important;border-radius:22px!important;background:var(--card)!important;color:var(--ink);overflow:hidden;transform:none;box-shadow:0 1px 0 rgba(0,0,0,.02);transition:border-color .35s,box-shadow .45s var(--ease),transform .45s var(--ease)!important;isolation:isolate}
.posts.v3 .post-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--ac) 10%,transparent),transparent 45%);opacity:0;transition:opacity .4s;z-index:-1}
.posts.v3 .post-card:hover{transform:translateY(-4px)!important;border-color:var(--line2)!important;box-shadow:0 30px 60px -34px rgba(0,0,0,.45)!important}
.posts.v3 .post-card:hover::after{opacity:1}
.posts.v3 .pc-img{position:relative;border-radius:15px;overflow:hidden;aspect-ratio:16/10;background:var(--paper2)}
.posts.v3 .pc-img img,.posts.v3 .post-ph{width:100%;height:100%;aspect-ratio:auto!important;object-fit:cover;border-radius:0!important;transition:transform 1s var(--ease),filter .5s!important}
.posts.v3 .post-card:hover .pc-img img{transform:scale(1.06)!important}
.posts.v3 .post-ph{display:grid;place-items:center;color:var(--mu);background:repeating-linear-gradient(45deg,var(--paper2) 0 10px,var(--paper) 10px 20px)}
.posts.v3 .pc-cat{position:absolute;left:10px;top:10px;padding:5px 10px;border-radius:99px;font:500 .7rem/1 var(--mono);letter-spacing:.04em;text-transform:uppercase;background:color-mix(in srgb,var(--card) 82%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--ink);border:1px solid color-mix(in srgb,var(--ink) 8%,transparent)}
.posts.v3 .pc-num{position:absolute;right:10px;top:10px;font:500 .7rem/1 var(--mono);color:#fff;mix-blend-mode:difference;opacity:.8}
.posts.v3 .pc-b{padding:16px 10px 8px!important;display:flex;flex-direction:column;gap:9px;flex:1}
.posts.v3 .post-meta{display:flex;gap:10px;align-items:center;font:500 .72rem/1 var(--mono);color:var(--mu);text-transform:uppercase;letter-spacing:.05em}
.posts.v3 .post-meta span::before{content:"";display:inline-block;width:3px;height:3px;border-radius:50%;background:currentColor;margin-right:10px;vertical-align:middle}
.posts.v3 h3{margin:0!important;font-size:1.14rem!important;line-height:1.28!important;letter-spacing:-.02em;font-weight:600;text-decoration:none!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.posts.v3 .post-card p{margin:0;color:var(--mu);font-size:.9rem;line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.posts.v3 .pc-go{margin-top:auto;padding-top:10px;display:flex!important;align-items:center;justify-content:space-between;font:500 .82rem var(--f);color:var(--ink);border-top:1px dashed var(--line)}
.posts.v3 .pc-go i{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line2);transition:background .3s,color .3s,border-color .3s,transform .45s var(--ease)}
.posts.v3 .post-card:hover .pc-go i{background:var(--ink);color:var(--paper);border-color:var(--ink);transform:rotate(-45deg)}
/* öne çıkan: ilk kart geniş */
.posts.v3.bl-featured .post-card:first-child{grid-column:span 2;flex-direction:row}
.posts.v3.bl-featured .post-card:first-child .pc-img{flex:1.25;aspect-ratio:auto;min-height:320px}
.posts.v3.bl-featured .post-card:first-child .pc-b{flex:1;padding:24px 22px 12px!important;justify-content:flex-end}
.posts.v3.bl-featured .post-card:first-child h3{font-size:clamp(1.4rem,2.2vw,1.9rem)!important;-webkit-line-clamp:3}
.posts.v3.bl-featured .post-card:first-child p{-webkit-line-clamp:4}
@media (max-width:1000px){.posts.v3{grid-template-columns:repeat(2,minmax(0,1fr))!important}.posts.v3.bl-featured .post-card:first-child{grid-column:1/-1}}

/* ============ 3) ÜRÜN KARTLARI ============ */
.shop.v3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.shop.v3 .prod{position:relative;padding:8px;border:1px solid var(--line);border-radius:22px;background:var(--card);overflow:hidden;transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .3s;isolation:isolate}
.shop.v3 .prod:hover{transform:translateY(-4px);border-color:var(--line2);box-shadow:0 30px 60px -34px rgba(0,0,0,.45)}
.shop.v3 .prod-img{position:relative;border-radius:15px;overflow:hidden;aspect-ratio:4/3;background:radial-gradient(120% 90% at 50% 0%,color-mix(in srgb,var(--ac) 14%,var(--paper2)),var(--paper2))}
.shop.v3 .prod-img img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.shop.v3 .prod:hover .prod-img img{transform:scale(1.06)}
.shop.v3 .prod-img .tag{position:absolute;left:10px;top:10px;padding:5px 10px;border-radius:99px;font:500 .7rem/1 var(--mono);text-transform:uppercase;background:var(--ink);color:var(--paper)}
.shop.v3 .prod-inst{position:absolute;right:10px;bottom:10px;padding:5px 10px;border-radius:99px;font:500 .7rem/1 var(--mono);background:color-mix(in srgb,var(--card) 85%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--ink);transform:translateY(8px);opacity:0;transition:.4s var(--ease)}
.shop.v3 .prod:hover .prod-inst{transform:none;opacity:1}
.shop.v3 .prod-b{padding:16px 10px 6px;display:flex;flex-direction:column;gap:8px;flex:1}
.shop.v3 .prod-b h3{margin:0;font-size:1.12rem;letter-spacing:-.02em}
.shop.v3 .prod-b p{margin:0;color:var(--mu);font-size:.9rem;line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.shop.v3 .prod-f{margin-top:auto;padding-top:12px;display:flex;align-items:flex-end;justify-content:space-between;border-top:1px dashed var(--line)}
.shop.v3 .prod-f small{display:block;font:500 .68rem/1 var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--mu);margin-bottom:5px}
.shop.v3 .prod-f b{font-size:1.3rem;letter-spacing:-.03em}
.shop.v3 .prod-f i{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line2);transition:.4s var(--ease)}
.shop.v3 .prod:hover .prod-f i{background:var(--ac);color:#fff;border-color:var(--ac);transform:rotate(-45deg)}
@media (max-width:1000px){.shop.v3{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* kart ızgarası ekrana girerken sırayla */
.v3 .post-card.reveal,.v3 .prod.reveal{opacity:1}
@media (prefers-reduced-motion:no-preference){.v3-in>*{animation:v3In .7s var(--ease) both;animation-delay:calc(var(--i,0)*70ms)}}
@keyframes v3In{from{opacity:0;transform:translateY(18px) scale(.985);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}

/* ============ 4) SAYFALAMA ============ */
.bl-pg.v3{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;margin:46px 0 0;position:relative}
.bl-pg.v3 .bl-pg-nums{display:flex;gap:4px;padding:4px;border:1px solid var(--line);border-radius:99px;background:var(--card);position:relative}
.bl-pg.v3 .bl-pg-nums a,.bl-pg.v3 .bl-pg-gap{position:relative;z-index:1;min-width:40px;height:40px;padding:0 6px;display:grid;place-items:center;border-radius:99px;font:500 .88rem var(--mono);color:var(--mu);transition:color .3s}
.bl-pg.v3 .bl-pg-nums a:hover{color:var(--ink)}
.bl-pg.v3 .bl-pg-nums a.on{color:var(--paper)}
.bl-pg.v3 .bl-pg-ink{position:absolute;z-index:0;top:4px;height:40px;border-radius:99px;background:var(--ink);transition:left .45s var(--ease),width .45s var(--ease)}
.bl-pg.v3 .bl-pg-nav{height:48px;padding:0 18px;display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:99px;background:var(--card);font-weight:500;font-size:.9rem;transition:border-color .3s,background .3s,color .3s}
.bl-pg.v3 .bl-pg-nav:hover{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.bl-pg.v3 .bl-pg-nav.off{opacity:.35;pointer-events:none}
.bl-pg.v3 .bl-pg-bar{flex-basis:100%;order:5;height:2px;max-width:280px;margin:6px auto 0;background:var(--line);border-radius:2px;overflow:hidden}
.bl-pg.v3 .bl-pg-bar i{display:block;height:100%;background:var(--ac)}
.bl-pg.v3 .bl-pg-info{flex-basis:100%;order:6;text-align:center;color:var(--mu);font-size:.72rem}

/* ============ 5) MOBİL: kaydırılan kart destesi ============ */
.v3-dots{display:none}
@media (max-width:700px){
  .posts.v3,.shop.v3{display:flex!important;gap:12px!important;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:-20px;padding:6px 20px 24px;scrollbar-width:none;overscroll-behavior-x:contain}
  .posts.v3::-webkit-scrollbar,.shop.v3::-webkit-scrollbar{display:none}
  .posts.v3 .post-card,.shop.v3 .prod{flex:0 0 84%;scroll-snap-align:center;flex-direction:column!important;transition:transform .35s var(--ease),opacity .35s,filter .35s!important}
  .posts.v3.bl-featured .post-card:first-child .pc-img{min-height:0;aspect-ratio:16/10}
  .posts.v3.bl-featured .post-card:first-child .pc-b{padding:16px 10px 8px!important}
  .posts.v3.bl-featured .post-card:first-child h3{font-size:1.14rem!important}
  .v3-deck>*{transform:scale(var(--ds,1)) translateY(var(--dy,0px))!important;opacity:var(--do,1);transform-origin:center bottom}
  .v3-dots{display:flex;justify-content:center;align-items:center;gap:6px;margin:-8px 0 8px}
  .v3-dots i{width:6px;height:6px;border-radius:9px;background:var(--line2);transition:width .35s var(--ease),background .35s}
  .v3-dots i.on{width:22px;background:var(--ink)}
  .v3-count{text-align:center;font:500 .7rem var(--mono);color:var(--mu);margin-bottom:6px}
  .bl-pg.v3 .bl-pg-nav span:not(:first-child){display:none}.bl-pg.v3 .bl-pg-nav{padding:0 14px}
}