/* wordpresstema.com vitrini v7 (12 Kasım 2026): sakin, düz renkler ve gerçek görseller.
   store.css'ten sonra yüklenir: 1) renk paleti  2) degrade, ışıltı ve desenlerin kaldırılması
   3) hero slider (.hs2). Tek vurgu rengi düz marka mavisi; mor ve renk geçişleri yok. */

/* ---------- 1. Palet ---------- */
:root{
  --bg:#f5f7fa; --surface:#fff; --surface-2:#f1f4f8; --line:#e3e8ef;
  --ink:#0f172a; --muted:#5b6476; --navy:#0f172a; --navy-2:#0b1220;
  --blue:#1f4fd6; --blue-dark:#1a42b4; --blue-soft:#edf2fe; --purple:#1f4fd6;
  --accent:#1f4fd6; --accent-ink:#fff; --hl:#dbe6ff;
  --btn:#1f4fd6; --btn-ink:#fff; --btn-hover:#1a42b4;
  --hero-bg:#eef2f8; --on-navy:#fff; --on-navy-dim:#aeb9d6;
}
body{background:var(--bg)}
h2,h3,h4{font-weight:700}

/* ---------- 2. Sakinleştirme: degrade, ışıltı, nokta deseni, cam ve kayan çizgi yok ---------- */
.topbar{background:var(--navy)}
.topbar::before{display:none}
.topbar a,.topbar .tbi{color:var(--on-navy-dim)}
header.site{background:#fff;animation:none;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:1px solid var(--line)}
header.site.is-scrolled{background:#fff;box-shadow:0 10px 30px -24px rgba(0,0,0,.35)}
header.site::after{display:none}
header.site .logo .mark{filter:none}
header.site .search:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}
header.site .search button,.hbtn-cart .tile,header.site .cartbadge,
.catnav .navitem.all>button,.catnav .navitem.all>button:hover,.catnav .navitem.all.open>button,.catnav .navitem.all:hover>button,
.hs .dots button[aria-current=true]{background:var(--btn);color:var(--btn-ink);box-shadow:none;filter:none}
header.site .search button:hover{background:var(--btn-hover);filter:none}
.hbtn-cart.has-items{background:#fff;border-color:var(--line)}
.catnav{background:#fff;box-shadow:none}
.catnav::before{display:none}
.catnav .navitem>a,.catnav .navitem>button{color:var(--muted)}
.catnav .navitem>a:hover,.catnav .navitem>button:hover,.catnav .navitem.open>button,.catnav .navitem>a.active{color:var(--ink);background:var(--surface-2);box-shadow:none}
.catnav .club-btn{background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:none;filter:none}
.catnav .club-btn:hover{border-color:var(--blue);filter:none}
.catnav .club-btn .ico,.catnav .club-btn svg{color:var(--blue)}

.btn-blue,.btn:not(.secondary):not(.btn-outline):not(.btn-purple):not(.btn-white):not(.btn-glass){background:var(--btn);color:var(--btn-ink);box-shadow:none}
.btn-blue:hover,.btn:not(.secondary):not(.btn-outline):not(.btn-purple):not(.btn-white):not(.btn-glass):hover{background:var(--btn-hover)}
.btn.secondary:hover,.btn-outline:hover{border-color:var(--blue);color:var(--blue)}
.btn-purple{background:var(--btn)}
.btn-white{background:#fff;color:var(--ink)}
.btn-white:hover{background:var(--surface-2)}
:focus-visible{outline-color:var(--blue)}

/* yan sütun ve bölüm kartları: tek düz koyu yüzey */
.hero-club,.hl-stats,.hl-stats.cine,.agency{background:var(--navy);box-shadow:none}
.hero-club::after,.hl-stats::before,.cine-bg{display:none}
.hero-club .ey,.hero-club p,.hero-club .sub{color:var(--on-navy-dim)}
.cine-num,.cine-num *{background:none;-webkit-background-clip:initial;background-clip:initial;color:#fff;-webkit-text-fill-color:#fff}
.cine-num em,.cine .cine-k{color:#8fb2ff;-webkit-text-fill-color:#8fb2ff}
.cine-bar i{background:var(--blue)}
.mini-item .mi{background:var(--surface-2);color:var(--ink)}
.ptile::after{display:none}

/* degradeli düz yüzeyler */
.mega .feat,.aud,.tk-dash,.request .visual,.guide .thumb,.hl-stats:not(.cine){background:var(--surface-2)}
.tc-media{background:var(--surface-2)}
.tc-badge-pop{background:#ea580c;color:#fff}
.tc-badge-new,.tc-badge-plugin{background:var(--blue)}
.tc-badge-free{background:#15803d}
.tk-msg.is-staff .tk-avatar{background:var(--blue)}

/* kategori kutuları: pastel kareler yerine sade ikon */
.cat3 .ci{background:var(--surface-2);color:var(--ink)}
.cat3:hover .ci{background:var(--blue);color:#fff}

/* ---------- 3. Hero slider (.hs2) ---------- */
.hero-3col .hs.hs2{background:var(--hero-bg);color:var(--ink);border:1px solid var(--line);box-shadow:none;border-radius:22px}
.hs.hs2:focus-visible{box-shadow:0 0 0 3px color-mix(in oklab,var(--ink) 30%,transparent)}
.hero-3col .hs.hs2 .slide{grid-template-columns:.9fr 1.1fr;gap:28px;padding:34px 36px 74px;min-height:404px}
.hs2 .hs2-theme{background:color-mix(in oklab,var(--c,#888) 10%,var(--hero-bg))}

.hs2 .ey{display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;padding:0;background:none;border:0;font-family:var(--font-ui);font-size:.78rem;font-weight:600;letter-spacing:0;text-transform:none;color:var(--muted)}
.hs2 .ey .dot{width:8px;height:8px;border-radius:50%;background:var(--c,var(--accent))}
.hero-3col .hs.hs2 h1,.hero-3col .hs.hs2 h2{color:var(--ink);font-size:clamp(1.7rem,2.5vw,2.35rem);font-weight:800;letter-spacing:-.03em;line-height:1.08}
.hs.hs2 h1 em,.hs.hs2 h2 em{color:inherit;-webkit-text-fill-color:currentColor;background:linear-gradient(transparent 60%,var(--hl) 60%,var(--hl) 92%,transparent 92%);-webkit-background-clip:border-box;background-clip:border-box;padding:0 .06em;font-style:normal}
.hero-3col .hs.hs2 .lede{color:var(--muted);font-size:.98rem;line-height:1.6;margin-top:14px;max-width:30em}
.hs2 .price{display:flex;align-items:baseline;gap:10px;margin-top:18px}
.hs2 .price b{font-size:1.65rem;font-weight:800;letter-spacing:-.02em}
.hs2 .price small{font-family:var(--font-ui);font-size:.8rem;color:var(--muted)}
.hero-3col .hs.hs2 .acts{margin-top:20px;gap:10px}
.hero-3col .hs.hs2 .acts .btn.hs2-main{background:var(--btn);color:var(--btn-ink);border-color:transparent}
.hero-3col .hs.hs2 .acts .btn.hs2-main:hover{background:var(--btn-hover)}
.hero-3col .hs.hs2 .acts .btn.hs2-alt{background:#fff;color:var(--ink);border:1px solid var(--line)}
.hero-3col .hs.hs2 .acts .btn.hs2-alt:hover{border-color:var(--ink)}

/* ---- görseller: kutunun kenarından taşan büyük çerçeve ve akan tema sütunları ----
   Görseller mutlak konumlu: yüksekliği metin belirler, kutu boyu değişmez. */
.hs2 .slide{position:relative}
.hero-3col .hs.hs2 .hs2-intro,.hero-3col .hs.hs2 .hs2-theme,.hero-3col .hs.hs2 .hs2-panel{grid-template-columns:1fr}
.hs2-intro .copy,.hs2-theme .copy,.hs2-panel .copy{max-width:45%;position:relative;z-index:2}

.hs2-browser{margin:0;position:relative;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.06),0 40px 80px -40px rgba(0,0,0,.5)}
.hs2-browser .bar{height:28px;display:flex;align-items:center;gap:6px;padding:0 12px;background:#f6f5f2;border-bottom:1px solid rgba(0,0,0,.05)}
.hs2-browser .bar i{width:8px;height:8px;border-radius:50%;background:#dcd8d0}
.hs2-browser .url{margin-left:10px;font-family:var(--font-ui);font-size:.68rem;color:#8b867c;background:#fff;border:1px solid rgba(0,0,0,.05);border-radius:999px;padding:2px 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:55%}
.hs2-browser .screen{display:block;position:relative;aspect-ratio:16/10;overflow:hidden;background:#fff}
.hs2-browser .screen img{position:absolute;inset:0 auto auto 0;width:100%;height:auto;display:block}
.hs2-browser .screen img:not(.full){height:100%;object-fit:cover;object-position:top}
/* tam sayfa görüntü (1440x~3600) çerçevede yavaşça aşağı inip geri çıkar */
.hs2 .slide.is-active .screen img.full{animation:hs2-scroll 18s ease-in-out .8s infinite alternate}
@keyframes hs2-scroll{0%,10%{transform:translateY(0)}90%,100%{transform:translateY(-73%)}}

.hs2-bleed{position:absolute;z-index:1;top:30px;right:-64px;width:59%}
.hs2-bleed .hs2-browser{border-radius:14px 0 0 14px}
.hs2-panel .hs2-bleed{width:62%;top:36px}
.hs2-phone{margin:0;position:absolute;left:-2%;bottom:-34px;width:22%;border-radius:22px;border:5px solid #121212;overflow:hidden;background:#121212;box-shadow:0 30px 50px -24px rgba(0,0,0,.6)}
.hs2-phone img{display:block;width:100%;aspect-ratio:9/19;object-fit:cover;object-position:top;border-radius:16px}

/* giriş: iki sütunda yukarı ve aşağı akan gerçek temalar, üst ve altta yumuşak geçiş */
.hs2-flow{position:absolute;top:0;bottom:0;right:0;width:52%;display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:0 22px 0 6px;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%)}
.hs2-flow .fcol{position:relative;overflow:hidden}
.hs2-flow .ftrack{display:grid;gap:14px;padding-bottom:14px;animation:hs2-flow 46s linear infinite}
.hs2-flow .fcol-2 .ftrack{animation-direction:reverse;animation-duration:52s}
@keyframes hs2-flow{to{transform:translateY(-50%)}}
.hs2-flow .fitem{position:relative;display:block;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.06),0 18px 34px -24px rgba(0,0,0,.45)}
.hs2-flow .fitem img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}
.hs2-flow .ftag{position:absolute;left:10px;bottom:10px;font-family:var(--font-ui);font-size:.7rem;font-weight:700;color:var(--ink);background:#fff;border-radius:999px;padding:4px 10px;opacity:0;transform:translateY(4px);transition:opacity .2s,transform .2s}
.hs2-flow .fitem:hover .ftag{opacity:1;transform:none}
.hs2:hover .hs2-flow .ftrack{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.hs2-flow .ftrack,.hs2 .slide.is-active .screen img.full{animation:none}}

/* özel tema: adımlar */
.hs2-steps{list-style:none;margin:0 0 0 auto;padding:0;display:grid;gap:10px;max-width:380px;counter-reset:st}
.hs2-steps li{counter-increment:st;display:grid;grid-template-columns:36px 1fr;column-gap:12px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.hs2-steps li::before{content:counter(st);grid-row:span 2;width:36px;height:36px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font-weight:800}
.hs2-steps b{font-size:.95rem}
.hs2-steps small{font-family:var(--font-ui);font-size:.78rem;color:var(--muted)}

/* alt gezinme: slayt adlarıyla sekmeler, etkin sekmede ilerleme çizgisi */
.hs2 .hs-nav{left:28px;right:22px;bottom:16px;gap:12px}
.hs2 .hs2-tabs{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;min-width:0}
.hs2 .hs2-tabs::-webkit-scrollbar{display:none}
.hs.hs2 .hs2-tabs button,.hs.hs2 .hs2-tabs button[aria-current=true]{width:auto;height:auto;border-radius:0;background:none;box-shadow:none;position:relative;flex:none;padding:8px 12px 12px;font-family:var(--font-ui);font-size:.8rem;font-weight:600;color:var(--muted);cursor:pointer;white-space:nowrap}
.hs.hs2 .hs2-tabs button:hover,.hs.hs2 .hs2-tabs button[aria-current=true]{color:var(--ink)}
.hs2 .hs2-tabs button i{position:absolute;left:12px;right:12px;bottom:4px;height:2px;border-radius:2px;background:color-mix(in oklab,var(--ink) 12%,transparent);overflow:hidden}
.hs2 .hs2-tabs button i::after{content:"";position:absolute;inset:0;transform:scaleX(0);transform-origin:left;background:var(--blue)}
.hs2 .hs2-tabs button[aria-current=true] i::after{animation:hs2-fill var(--hs-dur,7000ms) linear forwards}
.hs2.is-paused .hs2-tabs button[aria-current=true] i::after{animation-play-state:paused}
@keyframes hs2-fill{to{transform:scaleX(1)}}
.hs2 .hs-arrows{position:relative;z-index:3}
.hs.hs2 .arr{background:#fff;color:var(--ink);border:1px solid var(--line);backdrop-filter:none;width:38px;height:38px}
.hs.hs2 .arr:hover{background:var(--ink);color:#fff;border-color:var(--ink);transform:none}
@media (prefers-reduced-motion:reduce){.hs2 .hs2-tabs button[aria-current=true] i::after{animation:none;transform:scaleX(1)}}

/* slaytlar kutunun tamamını doldurur */
.hero-3col .hs.hs2{display:flex;flex-direction:column}
.hs2 .slides{flex:1}
/* store.css 1300 px altında slider görsellerini gizliyordu (dizüstü dahil); yeni hero'da görseller hep görünür */
.hero-3col .hs.hs2 .vis{display:block}

@media (max-width:1300px) and (min-width:901px){
  .hero-3col .hs.hs2 .slide{padding:28px 26px 70px}
  .hero-3col .hs.hs2 h1,.hero-3col .hs.hs2 h2{font-size:clamp(1.45rem,2.2vw,1.9rem)}
  .hero-3col .hs.hs2 .lede{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .hs2-intro .copy,.hs2-theme .copy,.hs2-panel .copy{max-width:48%}
  .hs2-bleed{width:56%;right:-60px}
  .hs2-flow{width:48%}
}

/* tablet ve mobil: görsel üstte, metin altta; görseller akışa girer */
@media (max-width:900px){
  .hero-3col .hs.hs2 .slide{grid-template-columns:1fr;gap:18px;padding:18px 18px 70px;min-height:0;align-content:start}
  .hero-3col .hs.hs2 .vis{order:-1}
  .hs2-intro .copy,.hs2-theme .copy,.hs2-panel .copy{max-width:none}
  .hs2-flow{position:relative;inset:auto;width:auto;height:230px;margin:-18px -18px 0;padding:0 14px}
  .hs2-bleed,.hs2-panel .hs2-bleed{position:relative;top:auto;right:auto;width:auto;margin:0 -18px 14px 12%}
  .hs2-phone{left:-14%;bottom:-18px;width:26%}
  .hs2-steps{margin:0;max-width:none}
  .hs2-steps li{padding:10px 12px}
  .hs2 .hs-nav{left:12px;right:12px;bottom:12px}
  .hs2 .hs-arrows{display:none}
}
@media (max-width:620px){
  .hero-3col .hs.hs2 h1,.hero-3col .hs.hs2 h2{font-size:clamp(1.45rem,6.6vw,1.9rem)}
  .hero-3col .hs.hs2 .lede{font-size:.93rem}
  .hs2 .price b{font-size:1.4rem}
  .hero-3col .hs.hs2 .hs2-custom .vis{display:none}
}
.hs2-theme .lede{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hero-3col .hs.hs2 .hs2-flow{display:grid}

/* Logo: kaydırınca 40 px'e çıkan kural mobil boyutları eziyordu (logo hesap/sepet düğmelerinin altına giriyordu).
   Her genişlikte kaydırılmış başlıkta logo, sayfa başındakinden biraz küçük kalır. */
@media (max-width:1180px){header.site.is-scrolled .logo.lg{--lh:38px}}
@media (max-width:980px){header.site.is-scrolled .logo.lg{--lh:34px}}
@media (max-width:820px){header.site.is-scrolled .logo.lg{--lh:32px}}
@media (max-width:400px){header.site.is-scrolled .logo.lg{--lh:27px}}
/* "20 yıl" rozeti açılışta bir kez belirir; sonsuz nabız yok */
.lp-badge img{animation:none}
/* alt bilgi: ~600 px ekranda bülten formu sütunu taşırıp sayfayı yana kaydırıyordu */
@media (max-width:860px){.fgrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media (max-width:480px){.fgrid{grid-template-columns:minmax(0,1fr)}}
.fgrid input,.fgrid form{min-width:0;max-width:100%}