/* ============================================================
   PlayHub — Ana sayfa stilleri (kategori şeridi + kartlar + carousel)
   ============================================================ */

/* category strip */
.cats{display:flex;gap:var(--ph-cat-gap,18px);overflow-x:auto;padding-bottom:10px;margin-bottom:14px;scroll-snap-type:x proximity}
.cats::-webkit-scrollbar{height:7px}
.cat{flex:0 0 var(--ph-cat-width,320px);height:var(--ph-cat-height,118px);border-radius:calc(var(--ph-card-radius,16px) + 2px);position:relative;overflow:hidden;cursor:pointer;
  scroll-snap-align:start;display:flex;align-items:flex-end;padding:18px 20px;text-decoration:none;transition:transform .18s}
.cat:hover{transform:translateY(-3px)}
.cat span{font-family:"Baloo 2",sans-serif;font-weight:700;font-size:21px;color:#fff;z-index:2}
.cat .emoji{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:54px;z-index:2;filter:drop-shadow(0 6px 10px rgba(0,0,0,.35))}
.c1{background:linear-gradient(120deg,#1c4a63,#0e2d44)} .c1 span{color:#5fd0ff}
.c2{background:linear-gradient(120deg,#5b2147,#34122c)} .c2 span{color:#ff7ab8}
.c3{background:linear-gradient(120deg,#15493f,#0c2c28)} .c3 span{color:#4fe3b6}
.c4{background:linear-gradient(120deg,#473b16,#2a230d)} .c4 span{color:#ffd166}
.c5{background:linear-gradient(120deg,#1d4030,#10271d)} .c5 span{color:#7af0a0}
.c6{background:linear-gradient(120deg,#392063,#211142)} .c6 span{color:#b89bff}

/* section headers */
.sec-head{display:flex;align-items:baseline;gap:18px;margin:var(--ph-sec-gap,30px) 0 calc(var(--ph-sec-gap,30px) * 0.55)}
.sec-head h2{font-size:28px;font-weight:800}
.sec-head .more{color:var(--accent-2);font-weight:800;font-size:16px;text-decoration:none}
.sec-head .more:hover{text-decoration:underline}

/* top picks grid */
.grid{display:grid;gap:var(--ph-carousel-gap,16px)}
.grid.toppicks{grid-template-columns:2fr 1fr 1fr 2fr;grid-auto-rows:var(--ph-card-size,248px)}
.grid .card{width:auto;height:100%;min-height:var(--ph-card-size,248px);flex:initial;border-radius:var(--ph-card-radius,16px);box-shadow:var(--ph-card-shadow,0 4px 14px rgba(0,0,0,.35))}
.grid .card.tall,.grid .card.wide{grid-row:span 2}
@media (max-width:1180px){.grid.toppicks{grid-template-columns:1fr 1fr}}

/* carousel */
.carousel{position:relative;margin:0 -6px}
.carousel > .track{display:flex;flex-wrap:nowrap;align-items:stretch;gap:var(--ph-carousel-gap,16px);overflow-x:auto;overflow-y:hidden;
  scroll-behavior:smooth;padding:6px 6px 14px;width:100%;
  scroll-snap-type:x proximity;scrollbar-width:none;-ms-overflow-style:none}
.carousel > .track::-webkit-scrollbar{height:0;display:none}
.carousel > .track > .card{scroll-snap-align:start;flex:0 0 auto}
.carousel-compact > .track > .card{width:var(--ph-card-size,196px);height:var(--ph-card-size,196px)}
.car-btn{position:absolute;top:calc(50% - 7px);transform:translateY(-50%) scale(.9);
  width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.08);cursor:pointer;z-index:20;
  background:rgba(20,16,30,.88);color:#fff;backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;box-shadow:0 8px 22px rgba(0,0,0,.55);
  opacity:0;pointer-events:none;transition:opacity .22s,transform .2s,background .2s}
.carousel:hover .car-btn{opacity:1;pointer-events:auto;transform:translateY(-50%) scale(1)}
.car-btn:hover{background:var(--accent)}
.car-btn.prev{left:2px} .car-btn.next{right:2px}
.car-btn.hide{opacity:0!important;pointer-events:none!important}
.car-btn svg{width:26px;height:26px}

/* game card */
.card{display:block;position:relative;border-radius:var(--ph-card-radius,16px);overflow:hidden;cursor:pointer;background:var(--panel);flex:0 0 auto;
  width:var(--ph-card-size,248px);height:var(--ph-card-size,248px);box-shadow:var(--ph-card-shadow,0 4px 14px rgba(0,0,0,.35));transition:transform .18s,box-shadow .2s;text-decoration:none;color:inherit}
.row-big .card{width:300px;height:300px}
.row-big .card.lead{width:534px;height:300px}
.card .thumb{position:absolute;inset:0;overflow:hidden;background:#0a0810;isolation:isolate;contain:paint}
.card .thumb-img,.card-preview-vid{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;display:block
}
.card-preview-vid{
  z-index:2;opacity:0;visibility:hidden;pointer-events:none;
  transform:none;transition:opacity .2s ease,visibility .2s ease
}
.card.is-preview-active .card-preview-vid.is-playing{opacity:1;visibility:visible}
.card.is-preview-active .thumb-img{opacity:0}
.card .thumb .gname{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:"Baloo 2",sans-serif;font-weight:800;color:#fff;text-align:center;padding:0 14px;
  line-height:1.05;text-shadow:0 3px 8px rgba(0,0,0,.5);font-size:clamp(12px,calc(var(--ph-card-title-size,15px) * 1.35),32px);letter-spacing:.5px;z-index:1}
.card:hover{transform:translateY(var(--ph-card-hover-y,-4px));box-shadow:0 14px 30px rgba(0,0,0,.5)}

.tags{position:absolute;top:10px;left:10px;display:flex;gap:7px;z-index:6}
.tag{font-size:12px;font-weight:800;padding:5px 9px;border-radius:9px;color:#fff;display:flex;align-items:center;gap:4px;backdrop-filter:blur(4px)}
.tag.top{background:#ffc24b;color:#3a2a00}
.tag.new{background:#41a0ff}
.tag.hot{background:#ff5c47}
.tag.upd{background:#41a0ff}
.tag.orig{background:rgba(20,16,30,.8);color:#cdbcff}
.tag svg{width:13px;height:13px}

.random-btn{font-size:18px;line-height:1}

.collection-pills{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:8px}
.collection-pill{
  display:inline-flex;align-items:center;padding:10px 16px;border-radius:999px;
  background:var(--panel);border:1px solid var(--line);color:var(--txt);
  font-weight:800;font-size:14px;text-decoration:none;transition:background .18s,border-color .18s,transform .15s
}
.collection-pill:hover{background:var(--panel-2);border-color:var(--accent);transform:translateY(-1px)}

.collection-index-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin-bottom:28px}
.collection-index-card{
  display:flex;flex-direction:column;gap:8px;padding:20px 22px;border-radius:18px;
  background:linear-gradient(180deg,var(--panel),var(--bg-2));border:1px solid var(--line);
  text-decoration:none;color:inherit;transition:transform .18s,border-color .18s,box-shadow .18s;
  box-shadow:0 8px 24px rgba(0,0,0,.14);
}
.collection-index-card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--line) 50%,var(--accent) 50%);box-shadow:0 14px 32px rgba(0,0,0,.22)}
.collection-index-card h2{margin:0;font-size:20px;font-weight:800;line-height:1.2}
.collection-index-card p{margin:0;color:var(--txt-dim);font-size:14px;line-height:1.5;font-weight:600}
.collection-index-meta{margin-top:auto;font-size:13px;font-weight:800;color:var(--accent-2)}

.random-btn{font-size:18px;line-height:1}

/* Slim bottom info bar — always visible */
.card-info-bar{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:22px 10px 9px;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.82) 0%,rgba(0,0,0,.5) 48%,transparent 100%)}
.card-info-title{color:#fff;font-weight:500;font-size:13px;line-height:1.25;margin:0 0 4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-info-meta{display:flex;align-items:center;justify-content:space-between;gap:8px}
.card-info-meta .stars{display:flex;align-items:center;gap:1px}
.card-info-meta .stars svg{width:11px;height:11px;color:rgba(255,255,255,.28)}
.card-info-meta .stars svg.on{color:#f0b429}
.card-info-meta .plays{display:flex;align-items:center;gap:4px;color:#b8bcc8;font-weight:600;font-size:11px;line-height:1}
.card-info-meta .plays svg{width:11px;height:11px;color:#9aa0ad;flex:0 0 auto}

.stars{display:flex;align-items:center;gap:2px}
.stars svg{width:15px;height:15px;color:var(--star-off)}
.stars svg.on{color:var(--gold)}
.plays{display:flex;align-items:center;gap:5px;color:var(--muted);font-weight:800;font-size:13px}
.plays svg{width:14px;height:14px;color:var(--green)}

.footer-note{margin-top:50px;color:var(--txt-dim);font-size:13px;text-align:center;font-weight:600}

/* category rows (lazy-loaded carousels) */
.cat-rows{margin-top:8px}
.cat-row{margin-bottom:6px}
.cat-row-emoji{margin-right:8px;font-size:1.1em}
.cat-row-lazy{min-height:20px;margin-bottom:10px}
.cat-row-lazy.is-loading .cat-row-shimmer{opacity:1}
.cat-row-lazy.is-error .cat-row-skeleton{opacity:.4}
.cat-row-shimmer{
  height:var(--ph-card-size,248px);border-radius:var(--ph-card-radius,16px);margin:0 6px;
  background:linear-gradient(90deg,var(--panel) 0%,var(--panel-2) 45%,var(--panel) 90%);
  background-size:200% 100%;animation:catShimmer 1.2s ease-in-out infinite;
  opacity:.65;
}
@keyframes catShimmer{
  0%{background-position:100% 0}
  100%{background-position:-100% 0}
}
.cat-more-wrap{text-align:center;margin:18px 0 28px;padding:0 12px}
.cat-more-wrap.is-done{display:none}
.cat-more-btn{
  display:inline-flex;align-items:center;gap:10px;padding:14px 28px;border-radius:999px;
  border:2px solid var(--line);background:var(--panel);color:var(--txt);
  font-family:"Baloo 2",sans-serif;font-weight:800;font-size:15px;cursor:pointer;
  transition:background .2s,border-color .2s,transform .15s;
}
.cat-more-btn:hover:not(:disabled){background:var(--panel-2);border-color:var(--accent);transform:translateY(-1px)}
.cat-more-btn:disabled{opacity:.55;cursor:wait}
.cat-more-count{color:var(--txt-dim);font-size:13px;font-weight:700}

/* Deferred category mount (injected after LCP) */
.home-cats-mount:empty{display:none}
.home-cats-mount .cats{margin-top:calc(var(--ph-sec-gap,18px) * 0.85)}

/* ============ MOBILE — must stay last (overrides carousel + .card above) ============ */
@media (max-width:767px){
  .sec-head{
    margin-top:14px;
    margin-bottom:8px;
    gap:10px;
    padding-inline:0;
  }
  .sec-head h2{font-size:21px;letter-spacing:-.02em}
  .sec-head .more{font-size:14px}

  .grid.toppicks,
  .carousel{
    margin-left:calc(-1 * var(--ph-main-pad-x,6px))!important;
    margin-right:calc(-1 * var(--ph-main-pad-x,6px))!important;
    width:calc(100% + (var(--ph-main-pad-x,6px) * 2));
    max-width:100vw;
  }

  .grid.toppicks{
    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    gap:var(--ph-carousel-gap,8px);
    padding:2px var(--ph-carousel-edge,4px) 10px;
  }
  .grid.toppicks::-webkit-scrollbar{display:none}

  .carousel{margin-top:0!important;margin-bottom:0!important}
  .carousel > .track{
    padding:2px var(--ph-carousel-edge,4px) 10px!important;
    gap:var(--ph-carousel-gap,8px)!important;
    scroll-snap-type:x mandatory;
  }

  .grid.toppicks .card,
  .carousel > .track > .card,
  .carousel-compact > .track > .card,
  .play-next-sec .carousel > .track > .card,
  .cat-row .carousel > .track > .card{
    flex:0 0 calc((100vw - (var(--ph-carousel-edge,4px) * 2) - var(--ph-carousel-gap,8px)) / 2.08)!important;
    width:calc((100vw - (var(--ph-carousel-edge,4px) * 2) - var(--ph-carousel-gap,8px)) / 2.08)!important;
    height:auto!important;
    min-height:0!important;
    max-width:none!important;
    aspect-ratio:1/1;
    scroll-snap-align:start;
  }
  .grid.toppicks .card.tall,
  .grid.toppicks .card.wide{grid-row:span 1}

  .car-btn{display:none!important}

  .cats{
    margin-left:calc(-1 * var(--ph-main-pad-x,6px))!important;
    margin-right:calc(-1 * var(--ph-main-pad-x,6px))!important;
    padding-left:var(--ph-carousel-edge,4px);
    padding-right:var(--ph-carousel-edge,4px);
    margin-bottom:8px;
    scroll-padding-inline:var(--ph-carousel-edge,4px);
  }
  .cat{padding:12px 14px}
  .cat span{font-size:17px}
  .cat .emoji{font-size:38px;right:8px}
}

/* Homepage SEO content block (admin-editable) */
.home-seo-block{
  margin:calc(var(--ph-sec-gap,30px) * 1.2) 0 calc(var(--ph-sec-gap,30px) * 0.8);
  padding:28px 32px;
  width:100%;
  max-width:none;
  box-sizing:border-box;
  border-radius:calc(var(--ph-card-radius,16px) + 4px);
  background:var(--panel);
  border:1px solid var(--line);
  box-shadow:var(--ph-card-shadow,0 4px 14px rgba(0,0,0,.12));
  color:var(--prose);
  font-size:17px;
  line-height:1.8;
}
.home-seo-block h2{font-family:"Baloo 2",sans-serif;color:var(--txt);font-size:26px;font-weight:700;margin:0 0 14px}
.home-seo-block h3{font-family:"Baloo 2",sans-serif;color:var(--txt);font-size:20px;font-weight:700;margin:26px 0 10px}
.home-seo-block p{margin-bottom:18px}
.home-seo-block p:last-child{margin-bottom:0}
.home-seo-block a{color:var(--accent-2);text-decoration:none;font-weight:700}
.home-seo-block a:hover{text-decoration:underline}
body.ph-light .home-seo-block{
  background:var(--panel-2);
  border-color:color-mix(in srgb,var(--line) 80%,var(--accent) 20%);
  box-shadow:0 8px 28px rgba(26,29,53,.06);
}
@media (max-width:640px){
  .home-seo-block{padding:22px 20px;margin-top:24px}
  .home-seo-block h2{font-size:22px}
  .home-seo-block h3{font-size:18px}
}