/* Yazı tipleri paylaşımlı fonts.css içinde yüklenir. */
:root{color-scheme:dark;--bg:#080f19;--text:#f7f8fc;--muted:#a8b8d7}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow-x:hidden;overflow-y:auto;background:var(--bg);color:var(--text);font-family:Inter,Arial,sans-serif;-webkit-font-smoothing:antialiased}
button,input{font:inherit}button{color:inherit;cursor:pointer}a{color:inherit;text-decoration:none}
/* Odak halkası site genelinden gelir (base.css `:focus-visible`). Burada
   ayrıca `input:focus-visible` tanımlamak üst bar aramasının kutusuna ikinci
   bir çerçeve bindiriyordu; kural kaldırıldı. */
.viewport{position:relative;width:100%;min-height:var(--desktop-height,100svh);overflow:hidden;background:var(--bg);isolation:isolate}
.viewport:after{content:"";position:absolute;left:50%;bottom:-120px;width:min(920px,78vw);height:240px;transform:translateX(-50%);pointer-events:none;z-index:0;background:radial-gradient(ellipse at center,#5038ff 0%,#3524b966 38%,transparent 74%);filter:blur(24px);display:none}
/* Alt parlama ve "Araçlara in" yalnızca hero ilk ekranı TAM kapladığında
   gösterilir (JS: html.hero-fills). Hero ekrandan kısa/uzunsa parlama
   ortada kesik bir mor halka gibi görünüyordu. */
.hero-fills .viewport:after{display:block}
/* Seed the final desktop height in CSS before the deferred grid script runs.
   Ölçek yalnızca genişliğe bağlıdır ve büyük ekranlarda --hero-max ile
   sınırlanır; pencere kısaysa hero küçülmez, taşar (max). */
@media (min-width:1281px) and (max-width:1799px){:root{--stage-h:56.28vw}}
@media (min-width:1800px){:root{--stage-h:min(49.53vw,calc(var(--hero-max) / 1672 * 941))}}
@media (min-width:1281px){:root{--desktop-height:max(var(--stage-h),min(100svh,calc(var(--stage-h) + 112px)))}}
@media (max-width:1280px){:root{--desktop-height:0px}}
/* Masaüstünde hero, paylaşılan üst barın arkasından başlar: ilk ekran yine
   tamamen hero olur ve kompozisyon (metin 234, mozaik 118) referansla aynı
   kalır. Dar düzenlerde bar akışta kalır, sahne altından başlar. */
@media (min-width:1281px){.viewport{margin-top:calc(-1 * (var(--header-h,72px) + 1px))}}
.stage{position:absolute;left:50%;top:0;width:1672px;height:941px;transform:translateX(-50%);transform-origin:top center;overflow:visible;isolation:isolate;z-index:1;background:radial-gradient(ellipse 490px 235px at 58% 105%,#5041ff 0%,#253382 36%,transparent 79%),radial-gradient(ellipse 620px 370px at 48% 106%,#162044 0%,transparent 79%),#080f19}
.stage:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 550px 480px at 75% 56%,#0b1120 0%,transparent 85%)}
/* Sahnenin alt geçişi (eskiden mask-image ile yapılıyordu). Maske, varsayılan
   `mask-clip:border-box` yüzünden sahne kutusunun dışına taşan her şeyi
   kırpıyordu; hero metni üst barla hizalanmak için kutunun soluna taştığından
   kısa/az yükseklikli pencerede tamamen görünmez oluyordu. Artık geçiş, sahne
   kutusunun içinde duran bağımsız bir degrade katmanıdır; taşan metni kırpmaz. */
.stage-fade{position:absolute;left:0;right:0;bottom:0;height:170px;z-index:20;pointer-events:none;background:linear-gradient(to bottom,rgba(8,15,25,0),#080f19 82%)}
/* All desktop coordinates are measured on the 1672 × 941 reference.
   Üst bar sahnenin içinde değil: paylaşılan .site-header (base.css) hero'nun
   üzerinde durur; sahne yalnızca metin + piksel mozaiği taşır. */
.hero-copy{position:absolute;left:73px;top:275px;width:650px;z-index:12}

.hero-copy h1{margin:0;max-width:640px;font-size:62px;line-height:1.05;font-weight:800;letter-spacing:-2.4px;white-space:normal}
.sub{margin:22px 0 0;max-width:560px;font-size:23px;line-height:1.5;font-weight:400;letter-spacing:-.3px;color:#a4b5d5}
.hero-actions{margin-top:32px;display:flex;gap:24px}
/* Hero CTA'ları (70px) ve "araç öner" düğmesi. Kapsam DAR tutulur: buradaki
   `.btn` kuralı eskiden sayfadaki TÜM düğmelere uygulanıyordu ve üst barın
   "Giriş" düğmesini çerçevesiz, 22px metne çeviriyordu. */
:is(.hero-actions,.home-suggest) .btn{height:70px;display:inline-flex;align-items:center;justify-content:center;gap:14px;padding:0 28px;border-radius:14px;font-size:22px;font-weight:500;border:0;white-space:nowrap;transition:filter .18s,box-shadow .18s}
:is(.hero-actions,.home-suggest) .btn svg{width:24px;height:24px;flex:none}
:is(.hero-actions,.home-suggest) .btn-primary{width:265px;background:linear-gradient(112deg,#7061ff,#462aff);box-shadow:inset 0 1px 2px #a29cff55,0 9px 25px #4328ff24}
:is(.hero-actions,.home-suggest) .btn-secondary{width:229px;background:linear-gradient(110deg,#0c152188,#11192855);border:1px solid #53627a}
:is(.hero-actions,.home-suggest) .btn:hover{filter:brightness(1.13)}
:is(.hero-actions,.home-suggest) .btn-secondary:hover{border-color:#a6b5d6}
.scroll{position:absolute;left:50%;top:auto;bottom:24px;transform:translateX(-50%);width:120px;font-size:13px;letter-spacing:2px;line-height:17px;text-align:center;color:#b7c4fa;z-index:12}
.scroll:after{content:"";display:block;width:19px;height:19px;border-bottom:2px solid #a5b2ff;border-right:2px solid #a5b2ff;transform:rotate(45deg);margin:9px auto 0}
/* The mosaic is entirely DOM squares. Colors and irregular positions come from the reference. */
.mosaic-slot{display:contents}
.mosaic{
  position:absolute;left:836px;top:118px;width:830px;height:760px;z-index:5;
  /* Keep a stable surface while home.js paints the pixel grid after the
     initial HTML paint. */
  background:
    linear-gradient(90deg,transparent 0 20px,#101a2c 20px 21px,transparent 21px 42px),
    linear-gradient(0deg,transparent 0 20px,#101a2c 20px 21px,transparent 21px 42px),
    radial-gradient(ellipse 360px 300px at 56% 48%,#101a32 0%,transparent 76%);
  background-size:42px 42px,42px 42px,auto;
  opacity:.72;
}
.stage.is-ready .mosaic{background:none;opacity:1}
.grid{position:absolute;inset:0;isolation:isolate}
/* Optimizasyon (A): dekoratif pikseller tek SVG katmanında; "fener" ışığı ise
   imleci takip eden KÜÇÜK bir pencerede (330×330) gösterilir. Pencere taşınır,
   desen içinde ters yönde kaydırılır → her karede yalnızca küçük alan boyanır. */
.mosaic-clip{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.mosaic-base{position:absolute;inset:0}
.mosaic-base svg{display:block;width:100%;height:100%}
.mosaic-flash{position:absolute;left:0;top:0;width:330px;height:330px;overflow:hidden;pointer-events:none;
  filter:brightness(2.2) saturate(1.05);mix-blend-mode:screen;opacity:0;transition:opacity .22s;will-change:transform;
  -webkit-mask-image:radial-gradient(circle 155px at 165px 165px,rgba(0,0,0,.95) 0%,rgba(0,0,0,.45) 42%,transparent 74%);
  mask-image:radial-gradient(circle 155px at 165px 165px,rgba(0,0,0,.95) 0%,rgba(0,0,0,.45) 42%,transparent 74%)}
.mosaic-flash.is-on{opacity:1}
.mosaic-flash-inner{position:absolute;left:0;top:0;width:830px;height:760px;will-change:transform}
.mosaic-flash-inner svg{display:block;width:100%;height:100%}
.px{--power:0;position:absolute;display:block;margin:0;padding:0;border:0;border-radius:1px;background:var(--pixel);transition:opacity .15s,filter .15s,transform .15s;transform-origin:center;pointer-events:none}
.px.bg{filter:brightness(calc(1 + var(--power)*1.6))}
.px.shape{z-index:1;opacity:1;filter:brightness(calc(1 + var(--power)*.45));box-shadow:0 0 11px 2px rgba(var(--halo),.29),0 0 25px 3px rgba(var(--halo),.13);background:linear-gradient(132deg,#ffffff0d,transparent 80%),var(--pixel)}
.px.scatter-pixel{z-index:2;opacity:.9;box-shadow:0 0 7px 2px rgba(var(--halo),.3),0 0 22px rgba(var(--halo),.13);filter:brightness(calc(1 + var(--power)*.35))}
/* Ürün kareleri: "her piksel bir ürün" — dekoratif piksellerden ayrışsın.
   Yalnızca 72 düğüm olduğu için hale/kenar maliyeti ihmal edilebilir.
   Kenar halkası + sheen + renkli hale birlikte bağımsız buton hissi verir. */
.px.product{pointer-events:auto;cursor:pointer;border-radius:3px;
  background:linear-gradient(135deg,#ffffff30,transparent 62%),var(--pixel);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.3),0 0 8px 1px rgba(var(--halo),.65),0 0 20px 5px rgba(var(--halo),.32);
  filter:brightness(calc(1.14 + var(--power)*.45)) saturate(1.07)}
.px.product svg{position:absolute;inset:3px;width:calc(100% - 6px);height:calc(100% - 6px);opacity:0;pointer-events:none}
.px.product.selected{opacity:1!important;z-index:12;transform:scale(2.75);background:#bdc6ff;color:#6550ec;border:1px solid #f9fbff;box-shadow:0 0 10px #5678ff,0 0 26px 5px #3d64ffb3}
.px.product.selected svg{opacity:1}
.px.product.selected:before{content:"";position:absolute;left:50%;top:-10px;height:9px;width:.6px;background:#dceeff;box-shadow:0 0 3px 1px #587aff}
/* Featured bağlantı çizgisi kaldırıldı: el yazısı notu canlıya basılmıyor (MARKA §9.4). */
.px.product:focus-visible{outline:2px solid #fff;outline-offset:3px;box-shadow:0 0 0 4px #080f19}
.tooltip{--arrow-x:98px;position:absolute;left:384px;top:58px;width:304px;min-height:75px;padding:14px 19px;display:flex;gap:17px;align-items:center;z-index:40;background:linear-gradient(110deg,#0e1621f7,#0d141df7);border:1px solid #364153;border-radius:15px;box-shadow:0 12px 25px #03091466;pointer-events:none}
.tooltip[hidden]{display:none}
.tooltip{transform-origin:top left}
.tip-copy{min-width:0}
.tip-copy span{white-space:normal}
.tooltip:after{content:"";position:absolute;bottom:-7px;left:calc(var(--arrow-x) - 6px);width:13px;height:13px;transform:rotate(45deg);background:#0d151f;border-right:1px solid #364153;border-bottom:1px solid #364153}
.tooltip.below:after{bottom:auto;top:-7px;transform:rotate(225deg)}
.tool-icon{width:35px;height:35px;flex:none;display:grid;place-items:center;color:#aeb7ff}.tool-icon svg{width:35px;height:35px}
.tip-copy strong{display:block;font-size:16px;font-weight:500;line-height:22px;white-space:nowrap}.tip-copy span{display:block;font-size:14px;line-height:20px;font-weight:400;color:#a9b7d1;white-space:normal;margin-top:2px}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* Compact layouts preserve the reference canvas on wider desktop screens. */
@media (max-width:1280px){
  /* Kaydırıcı kök (html) olsun: body height:auto iken kendi içinde
     kayamadığı için overflow:auto burada "yapışkan" üst barı bozar
     (sticky, kayamayan body scrollport'una bağlanır). clip, kaydırma
     kabı oluşturmadan yatay taşmayı keser; dikey kaydırma kökte kalır. */
  html,body{height:auto;min-height:100%;overflow-x:clip;overflow-y:visible}
  /* Üst bar içeriği hero metniyle aynı 24px hizadan başlasın: 1200px
     kolon sınırı 1232–1280 arasında markayı 16px içeri kaydırıyordu. */
  .site-header--overlay .header-inner{width:calc(100% - 48px)}
  .viewport{position:relative;inset:auto;width:100%;min-height:100vh;min-height:100svh;overflow:hidden}
  .stage{
    position:relative;left:0;top:0;width:100%;height:auto;min-height:0;
    transform:none!important;transform-origin:top left;
    display:grid;grid-template-columns:minmax(0,1fr);
    grid-template-areas:"hero" "mosaic";
    align-items:start;
    /* Keep the hero rhythm on tall tablet windows; the default grid stretch
       otherwise pushes navigation and content far apart. */
    align-content:start;
    padding:24px 12px 28px;
    padding-top:max(24px,env(safe-area-inset-top));
    padding-right:max(12px,env(safe-area-inset-right));
    padding-bottom:max(28px,env(safe-area-inset-bottom));
    padding-left:max(12px,env(safe-area-inset-left));
    background:
      radial-gradient(ellipse 380px 280px at 57% 100%,rgba(77,60,255,.2),transparent 72%),
      radial-gradient(ellipse 580px 450px at 84% 70%,rgba(39,45,105,.18),transparent 70%),
      linear-gradient(128deg,#050a13 0%,#07101b 56%,#060c17 100%);
  }
  .hero-copy{
    grid-area:hero;position:relative;left:auto;top:auto;width:calc(100% - 24px);
    margin:8px 12px 0;height:auto;min-width:0;
  }
  .hero-copy h1{font-size:clamp(34px,9.2vw,58px);line-height:1.06;letter-spacing:-.035em;white-space:normal}
  .hero-copy .sub{position:relative;top:auto;left:auto;margin-top:20px;font-size:clamp(15px,4.1vw,22px);line-height:1.55;letter-spacing:-.25px}
  .hero-actions{position:relative;left:auto;top:auto;display:flex;gap:10px;margin-top:28px;align-items:stretch}
  :is(.hero-actions,.home-suggest) .btn{width:auto;min-width:0;height:54px;border-radius:11px;padding:0 12px;font-size:clamp(13px,3.6vw,18px);gap:8px;white-space:nowrap}
  :is(.hero-actions,.home-suggest) .btn-primary{flex:1.16}
  :is(.hero-actions,.home-suggest) .btn-secondary{flex:1}
  :is(.hero-actions,.home-suggest) .btn svg{width:17px;height:17px;flex:none}
  .mosaic-slot{
    grid-area:mosaic;display:block;position:relative;width:100%;max-width:830px;aspect-ratio:830 / 760;
    margin:24px auto 0;min-width:0;z-index:5;
  }
  .mosaic{
    position:absolute;left:0;top:0;width:830px;height:760px;
    transform:scale(var(--mosaic-scale));transform-origin:top left;
    touch-action:pan-y pinch-zoom;
  }
  .tooltip{transform-origin:top left}
  .tip-copy{min-width:0}
  .tip-copy span{white-space:normal;overflow-wrap:break-word}
  .scroll{display:none}
  .stage-fade{display:none}
  .viewport:after{display:none}
}

/* Compact heroes end after their content. A 100vh minimum here leaves a
   device-dependent dark block below the mosaic on tall windows. */
@media (max-width:1280px){.viewport{min-height:0}}

/* Tablets and landscape phones retain the side-by-side story without shrinking text. */
@media (min-width:700px) and (max-width:1280px){
  .stage{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-areas:"hero mosaic";
  }
  .hero-copy{margin-top:8px}
  .hero-copy h1{font-size:clamp(38px,5.2vw,62px)}
  .hero-copy .sub{font-size:clamp(16px,1.75vw,19px);line-height:1.55}
  .hero-copy .sub br{display:none}
  .hero-actions{gap:10px}
  :is(.hero-actions,.home-suggest) .btn{font-size:clamp(13px,1.42vw,16px);padding-inline:10px;gap:7px;min-height:50px;height:54px}
  .hero-actions .btn-primary{flex:0 0 auto;min-width:210px}
  .mosaic-slot{align-self:center;margin-top:32px}
}

@media (max-width:359px){
  .hero-actions{gap:8px}
  :is(.hero-actions,.home-suggest) .btn{padding-inline:9px;gap:6px;font-size:13px}
}

/* Larger invisible tap areas keep the visible, irregular pixel geometry intact. */
@media (pointer:coarse){
  button,a{-webkit-tap-highlight-color:transparent}
  .px.product:not(.selected):after{
    content:"";position:absolute;left:50%;top:50%;
    width:max(100%,calc(44px / var(--mosaic-scale,1)));
    height:max(100%,calc(44px / var(--mosaic-scale,1)));
    transform:translate(-50%,-50%);background:transparent;
  }
}
/* Dokunmatikte ağır gölge yığını yerine ucuz kenar halkası: ürün yine belli olur. */
@media (hover:none){.px.product{box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);filter:brightness(calc(1.1 + var(--power)*.45)) saturate(1.05)}}


/* ==========================================================================
   Ana sayfa bölümleri (karar §1.3–§1.5) — hero dışı içerik
   Tüm araçlar · Kategoriler çipleri · Araç öner
   ========================================================================== */
/* Tüm araçlar: başlık + arama aynı satırda (referans tasarım). */
.sec-head--split{max-width:none;display:flex;align-items:flex-end;justify-content:space-between;gap:18px 28px;flex-wrap:wrap}
.tool-search{
  display:flex;align-items:center;gap:10px;flex:0 1 300px;height:44px;padding:0 14px;margin-bottom:2px;
  border:1px solid var(--line-2);border-radius:var(--radius);background:#0e1621bb;
  transition:border-color .16s,box-shadow .16s;
}
.tool-search svg{width:18px;height:18px;flex:none;color:#b2c6f7}
.tool-search input{background:transparent;border:0;outline:0;min-width:0;width:100%;font-size:14.5px;color:var(--ink)}
.tool-search input::placeholder{color:#95a3bd}
.tool-search:focus-within{border-color:#7b6dff;box-shadow:0 0 0 3px #7b6dff26}

/* Kare piksel kartlarının ortak stilleri base.css'te (.tool-grid--pixels);
   ana sayfa da aynı sınıfı kullanır (partials/home/tool-card). */

/* Bölüm içi arama boş sonuç durumu. Süzgeç artık pp/search.js'in ortak
   motorunda: eşleşmeyen kartlar `hidden` ile gizlenir (katalogla aynı). */
.tool-search-empty{margin:26px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;font-size:14.5px;color:var(--muted)}
.tool-search-empty[hidden]{display:none}
.tool-search-more{font-weight:500;color:#c5a2ff}
.tool-search-more:hover{color:#e0d5ff}

/* Bölüm altı "Tüm araçlar" düğmesi: ızgaranın altında ortalanır. */
.tool-all-wrap{display:flex;justify-content:center;margin-top:30px}

/* Arama sonucu kartları (istemci kurar): sunucu kartıyla AYNI iskelet —
   aracın kendi renginde piksel deseni, logosu, kategori çipi ve ok düğmesi
   (desen core/views/partials/home/tool-pixels.php'nin birebir eşleniğidir). */

@media (max-width:640px){
  .tool-search{flex:1 1 100%}
}

/* ==========================================================================
   Ana sayfa kapanışı: kullanım seçenekleri · araç öner (karar §1.4–§1.5)
   ========================================================================== */

/* Dekoratif piksel kümesi (partials/home/pixel-cluster): seçim kartlarının
   sağ kenarında ve öneri panelinin iki yanında yalnız süs olarak durur. */
.pixel-cluster{display:block;width:100%;height:100%}
.pixel-cluster svg{display:block;width:100%;height:100%}

/* Kullanım seçenekleri: "Hesapsız kullan" · "Hesapla devam et". */
.home-choice{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.choice-card{
  --accent:#8b6dff;--accent-rgb:139,109,255;
  position:relative;overflow:hidden;display:flex;align-items:center;gap:18px;
  min-height:118px;padding:22px 24px;
  border:1px solid var(--line);border-radius:var(--radius-l);
  background:linear-gradient(150deg,#0f1727,#0a111d);
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.choice-card--account{--accent:#5aa9f0;--accent-rgb:90,169,240}
a.choice-card:hover{transform:translateY(-3px);border-color:rgba(var(--accent-rgb),.52);box-shadow:var(--shadow-card)}
.choice-card>.pixel-cluster{
  position:absolute;right:-6px;top:50%;width:150px;height:112px;z-index:0;
  transform:translateY(-50%) scaleX(-1);color:var(--accent);opacity:.7;pointer-events:none;
}
.choice-icon{
  position:relative;z-index:1;display:grid;place-items:center;width:56px;height:56px;flex:none;
  border:1px solid rgba(var(--accent-rgb),.55);border-radius:16px;color:#fff;
  background:radial-gradient(125% 125% at 28% 18%,rgba(var(--accent-rgb),.62),rgba(var(--accent-rgb),.15));
  box-shadow:0 0 32px -8px rgba(var(--accent-rgb),.75);
}
.choice-icon svg{width:27px;height:27px}
.choice-copy{position:relative;z-index:1;display:flex;flex-direction:column;gap:3px;min-width:0}
.choice-copy strong{font-size:18px;font-weight:700;letter-spacing:-.01em}
.choice-copy span{font-size:13.5px;line-height:1.55;color:var(--muted);max-width:46ch}
.choice-cta{
  position:relative;z-index:1;display:inline-flex;align-items:center;gap:7px;flex:none;margin-left:auto;
  padding:10px 16px;border:1px solid rgba(var(--accent-rgb),.5);border-radius:999px;
  background:rgba(var(--accent-rgb),.14);color:#fff;font-size:13.5px;font-weight:600;white-space:nowrap;
  transition:background .18s,border-color .18s,transform .18s;
}
.choice-cta svg{width:16px;height:16px;flex:none}
a.choice-card:hover .choice-cta{background:rgba(var(--accent-rgb),.26);border-color:rgba(var(--accent-rgb),.7);transform:translateX(2px)}

/* Araç öner: kapanış CTA paneli (piksel süsleri + gradyan düğme). */
.home-suggest{
  position:relative;overflow:hidden;margin-top:20px;padding:58px 28px 56px;text-align:center;
  border:1px solid var(--line);border-radius:var(--radius-xl);
  background:
    radial-gradient(ellipse 460px 210px at 50% -20%,rgba(112,91,255,.18),transparent 72%),
    linear-gradient(160deg,#0c1322,#0a111d);
}
.suggest-spark{position:relative;z-index:1;display:block;width:10px;height:10px;margin:0 auto 16px;border-radius:2px;background:var(--violet-soft);transform:rotate(45deg);box-shadow:0 0 20px rgba(151,128,247,.75)}
.home-suggest h2{position:relative;z-index:1;font-size:clamp(24px,3vw,32px);font-weight:700;line-height:1.2}
.home-suggest p{position:relative;z-index:1;margin:12px auto 24px;max-width:460px;font-size:15.5px;line-height:1.7;color:var(--muted)}
.home-suggest-btn{position:relative;z-index:1;min-width:200px}
.suggest-px{position:absolute;top:50%;width:150px;height:112px;z-index:0;opacity:.7;pointer-events:none;transform:translateY(-50%)}
.suggest-px--left{left:20px;color:#9d8cff}
.suggest-px--right{right:20px;color:#5f8bff;transform:translateY(-50%) scaleX(-1)}

@media (max-width:820px){
  .home-choice{grid-template-columns:1fr}
  .home-suggest{padding:44px 20px 42px}
  .suggest-px{display:none}
}
@media (max-width:640px){
  .home-suggest-btn{width:100%}
  .choice-card{flex-wrap:wrap;row-gap:14px}
  .choice-copy{flex:1 1 0}
  .choice-cta{flex:1 1 100%;margin-left:0;justify-content:center}
}