/* ═══ BEYRİBEY REFERANSLAR — sanatsal, koyu-lacivert + altın vurgu ═══ */
:root{
  --lacivert:#0B1220; --lacivert2:#111B2E; --panel:#16223A;
  --cizgi:#243049; --metin:#E8EDF5; --soluk:#94A3B8; --silik:#5D6B82;
  --altin:#E9B949; --altin2:#F5D07B; --mavi:#3B82F6; --yesil:#34D399;
  /* açık gazete kağıdı bloklar — koyu zeminde net ayrışsın */
  --kagit:#F5F1E6; --kagit2:#EDE7D6; --kagit-cizgi:#DED6C1;
  --murekkep:#232019; --murekkep2:#5E584B; --murekkep3:#8A836F;
  --kagit-altin:#9A6B12;
  --r:18px; --r-s:11px;
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--lacivert);color:var(--metin);font-family:Inter,system-ui,sans-serif;
  line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
.kap{max-width:1220px;margin:0 auto;padding:0 22px}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:Sora,sans-serif;line-height:1.15;letter-spacing:-.02em}
.vurgu{background:linear-gradient(100deg,var(--altin),var(--altin2));-webkit-background-clip:text;background-clip:text;color:transparent}

/* yıldız arka planı */
.yildizlar{position:fixed;inset:0;z-index:-1;background:
  radial-gradient(1px 1px at 20% 30%, #ffffff55, transparent),
  radial-gradient(1px 1px at 60% 70%, #ffffff44, transparent),
  radial-gradient(1.5px 1.5px at 80% 20%, #ffffff33, transparent),
  radial-gradient(1px 1px at 40% 80%, #ffffff44, transparent),
  radial-gradient(1px 1px at 90% 60%, #ffffff33, transparent),
  radial-gradient(circle at 15% 10%, #1c2c4a55, transparent 40%),
  radial-gradient(circle at 85% 90%, #1a2a4855, transparent 40%),
  var(--lacivert)}

/* ── ANA SİTE ÜST BARI (beyaz, logolu — ana siteyle birebir) ── */
.site-ust{position:sticky;top:0;z-index:50;background:#fff;box-shadow:0 2px 12px rgba(0,0,0,.08)}
.site-ust-ic{display:flex;align-items:center;justify-content:space-between;height:70px}
.site-logo{display:flex;align-items:center;gap:11px}
.site-logo img{height:46px;width:auto}
.site-logo b{display:block;font:700 1.15rem Sora,sans-serif;color:#213269;letter-spacing:-.01em}
.site-logo small{display:block;font-size:.72rem;color:#64748b}
.site-nav{display:flex;align-items:center;gap:26px}
.site-nav a{color:#334155;font-weight:600;font-size:.94rem;transition:.15s}
.site-nav a:hover,.site-nav a.etkin{color:#213269}
.site-nav .site-tel{background:#213269;color:#fff;padding:9px 20px;border-radius:9px}
.site-nav .site-tel:hover{background:#14204a;color:#fff}
.site-burger{display:none;font-size:1.6rem;color:#213269;background:none;border:0;cursor:pointer}
.site-mnav{display:none;flex-direction:column;padding:0 22px 14px}
.site-mnav a{padding:10px 0;color:#334155;font-weight:600;border-top:1px solid #eef2f7}
.site-mnav a.etkin{color:#213269}
.site-mnav.acik{display:flex}
@media(max-width:760px){.site-nav{display:none}.site-burger{display:block}}

/* eski koyu üst bar (kullanılmıyor) */
.ref-ust{position:sticky;top:0;z-index:50;background:rgba(11,18,32,.78);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--cizgi)}
.ust-ic{display:flex;align-items:center;justify-content:space-between;height:66px}
.marka{display:flex;align-items:center;gap:11px;font-family:Sora;font-weight:700;font-size:1.05rem}
.marka-im{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--altin),var(--altin2));color:#1a1200;font-weight:800;font-size:1.2rem}
.marka b{color:var(--altin)}
.marka small{display:block;font:500 .64rem Inter;color:var(--soluk);letter-spacing:.02em}
.ust-nav{display:flex;gap:26px;font-size:.92rem;font-weight:500}
.ust-nav a{color:var(--soluk);transition:.15s}
.ust-nav a:hover{color:var(--altin)}
@media(max-width:640px){.ust-nav a:not(:last-child){display:none}}

/* hero */
.hero{padding:76px 0 54px;text-align:center;position:relative}
.hero::after{content:"";position:absolute;left:50%;top:40%;width:520px;height:520px;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(233,185,73,.14),transparent 62%);z-index:-1;filter:blur(10px)}
.hero-etiket{display:inline-block;font:700 .74rem Sora;letter-spacing:.22em;color:var(--altin);
  padding:7px 16px;border:1px solid var(--altin);border-radius:99px;margin-bottom:22px;background:rgba(233,185,73,.06)}
.hero-etiket.koyu{color:var(--altin)}
.hero h1{font-size:clamp(2.1rem,5.4vw,3.9rem);font-weight:800;margin-bottom:18px}
.hero-alt{max-width:620px;margin:0 auto 34px;color:var(--soluk);font-size:1.06rem}
.hero-sayac{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.hero-sayac div{background:var(--kagit);border:1px solid var(--kagit-cizgi);border-radius:var(--r);
  padding:16px 26px;min-width:112px;box-shadow:0 10px 26px -18px rgba(0,0,0,.5)}
.hero-sayac b{display:block;font:800 1.9rem Sora;color:var(--kagit-altin);line-height:1}
.hero-sayac span{font-size:.8rem;color:var(--murekkep2);letter-spacing:.04em}

/* kategori menüsü (üstte, header'ın altında sabit) */
.kat-menu{position:sticky;top:70px;z-index:40;background:rgba(11,18,32,.9);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--cizgi);overflow:hidden}
.kat-menu-ic{display:flex;gap:8px;overflow-x:auto;padding:12px 22px;scrollbar-width:none}
.kat-menu-ic::-webkit-scrollbar{display:none}
.km-bag{flex:0 0 auto;padding:8px 16px;border-radius:99px;font:600 .86rem Inter;color:var(--soluk);
  border:1px solid var(--cizgi);white-space:nowrap;transition:.15s}
.km-bag:hover{color:var(--altin);border-color:var(--altin)}
.km-bag.etkin{background:var(--altin);color:#1a1200;border-color:var(--altin)}
.km-bag span{opacity:.7;font-size:.78rem}
.km-bag.etkin span{opacity:.85}

/* kategori bölümü */
.kat-bolum{margin:52px 0;scroll-margin-top:130px}
.kat-bas{display:flex;gap:15px;align-items:center;margin-bottom:22px}
.kat-ikon{width:46px;height:46px;flex:none;border-radius:13px;display:grid;place-items:center;
  background:linear-gradient(140deg,rgba(59,130,246,.18),rgba(233,185,73,.12));color:var(--altin);
  border:1px solid var(--cizgi)}
.kat-bas h2{font-size:1.5rem;display:flex;align-items:center;gap:11px}
.kat-say{font:700 .8rem Sora;background:var(--altin);color:#1a1200;padding:3px 11px;border-radius:99px}
.kat-bas p{color:var(--soluk);font-size:.92rem}

/* proje ızgarası */
.proje-izgara{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:20px}
.proje{background:var(--kagit);border:1px solid var(--kagit-cizgi);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;opacity:0;transform:translateY(22px);
  box-shadow:0 10px 26px -16px rgba(0,0,0,.55);
  transition:opacity .55s,transform .55s,box-shadow .2s,border-color .2s}
.proje.gor{opacity:1;transform:none}
.proje:hover{border-color:var(--altin);box-shadow:0 20px 46px -18px rgba(233,185,73,.45),0 10px 26px -16px rgba(0,0,0,.5);transform:translateY(-4px)}
.proje.one-cikan{border-color:var(--altin);box-shadow:0 0 0 1px rgba(233,185,73,.35),0 12px 30px -16px rgba(0,0,0,.55)}
.proje-gorsel{position:relative;display:block;aspect-ratio:16/10;background:var(--lacivert2);overflow:hidden;border-bottom:1px solid var(--kagit-cizgi)}
.proje-gorsel img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .5s}
.proje:hover .proje-gorsel img{transform:scale(1.05)}
.gorsel-yok{position:absolute;inset:0;display:grid;place-items:center;font:800 3rem Sora;color:var(--silik)}
.proje-durum{position:absolute;top:12px;left:12px;font:700 .68rem Sora;letter-spacing:.04em;
  padding:5px 12px;border-radius:99px;backdrop-filter:blur(6px)}
.d-y{background:rgba(52,211,153,.22);color:var(--yesil);border:1px solid rgba(52,211,153,.4)}
.d-t{background:rgba(59,130,246,.22);color:var(--mavi);border:1px solid rgba(59,130,246,.4)}
.d-d{background:rgba(233,185,73,.22);color:var(--altin);border:1px solid rgba(233,185,73,.4)}
.d-n{background:rgba(148,163,184,.2);color:var(--soluk)}
.proje-git{position:absolute;inset:auto 0 0 0;padding:26px 14px 12px;font:700 .84rem Sora;color:#fff;
  background:linear-gradient(transparent,rgba(11,18,32,.92));opacity:0;transform:translateY(8px);transition:.25s}
.proje:hover .proje-git{opacity:1;transform:none}
/* özel yazılım: linksiz kart — imleç normal, "Özel Yazılım" rozeti */
.proje.linksiz .proje-gorsel{cursor:default}
.proje-ozel{position:absolute;top:12px;right:12px;font:700 .66rem Sora;letter-spacing:.03em;
  padding:5px 11px;border-radius:99px;background:rgba(233,185,73,.9);color:#1a1200;backdrop-filter:blur(4px)}
.proje-ic{padding:16px 18px 18px;display:flex;flex-direction:column;gap:9px;flex:1}
.proje-ic h3{font-size:1.16rem;font-weight:700;color:var(--murekkep)}
.proje-ic p{color:var(--murekkep2);font-size:.86rem;line-height:1.55}
.proje-etiket{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:4px}
.proje-etiket span{font:600 .68rem Inter;color:var(--kagit-altin);background:rgba(154,107,18,.08);
  border:1px solid rgba(154,107,18,.28);padding:3px 9px;border-radius:7px}

/* panel tanıtımı */
.panel-tanitim{margin:70px 0 0;padding:66px 0;background:
  linear-gradient(180deg,transparent,rgba(59,130,246,.05),transparent);
  border-top:1px solid var(--cizgi);border-bottom:1px solid var(--cizgi)}
.pt-bas{text-align:center;max-width:680px;margin:0 auto 40px}
.pt-bas h2{font-size:clamp(1.8rem,4vw,2.9rem);font-weight:800;margin:16px 0 14px}
.pt-bas p{color:var(--soluk);font-size:1.02rem}
.pt-galeri{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-bottom:44px}
.pt-galeri figure{background:var(--kagit);border:1px solid var(--kagit-cizgi);border-radius:var(--r);overflow:hidden;
  box-shadow:0 10px 26px -16px rgba(0,0,0,.55);
  opacity:0;transform:translateY(20px) scale(.98);transition:.5s}
.pt-galeri figure.gor{opacity:1;transform:none}
.pt-galeri figure:hover{border-color:var(--altin)}
.pt-galeri img{width:100%;display:block;border-bottom:1px solid var(--kagit-cizgi)}
.pt-galeri figcaption{padding:11px 14px;font:600 .82rem Sora;color:var(--murekkep)}
.pt-yetenek{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.yt-kart{display:flex;gap:15px;background:var(--kagit);border:1px solid var(--kagit-cizgi);border-radius:var(--r-s);
  padding:17px 18px;box-shadow:0 10px 26px -18px rgba(0,0,0,.5);
  opacity:0;transform:translateY(16px);transition:.5s}
.yt-kart.gor{opacity:1;transform:none}
.yt-kart:hover{border-color:var(--altin)}
.yt-no{font:800 1.15rem Sora;color:var(--kagit-altin);flex:none;opacity:.85}
.yt-kart h4{font-size:1rem;font-weight:700;margin-bottom:4px;color:var(--murekkep)}
.yt-kart p{color:var(--murekkep2);font-size:.85rem;line-height:1.5}

/* footer */
.ref-alt{margin-top:8px;padding:44px 0 0;border-top:1px solid var(--cizgi);background:var(--lacivert2)}
.alt-ic{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-bottom:30px}
.alt-slogan{color:var(--soluk);font-size:.88rem;margin-top:10px}
.alt-iletisim{display:flex;flex-direction:column;gap:5px;text-align:right}
.alt-iletisim a{color:var(--altin);font-weight:700;font-family:Sora}
.alt-iletisim span{color:var(--silik);font-size:.82rem}
.alt-telif{border-top:1px solid var(--cizgi);padding:16px 0;text-align:center;color:var(--silik);font-size:.8rem}
@media(max-width:600px){.alt-ic,.alt-iletisim{text-align:left}.alt-iletisim{align-items:flex-start}}

/* ── kaydırma oku (hero'da aşağı in) ── */
.hero-ok{display:inline-flex;align-items:center;justify-content:center;margin-top:30px;
  width:46px;height:46px;border-radius:99px;border:1px solid var(--cizgi);
  background:var(--kagit);color:var(--kagit-altin);box-shadow:0 10px 24px -14px rgba(0,0,0,.6);
  animation:okzipla 1.8s ease-in-out infinite;transition:border-color .2s,transform .2s}
.hero-ok:hover{border-color:var(--altin);transform:translateY(3px)}
.hero-ok svg{width:22px;height:22px}
@keyframes okzipla{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}

/* ── yukarı çık düğmesi (kaydırınca belirir) ── */
.yukari{position:fixed;right:22px;bottom:22px;z-index:60;width:48px;height:48px;border-radius:14px;
  display:grid;place-items:center;cursor:pointer;border:1px solid var(--altin);
  background:linear-gradient(140deg,var(--altin),var(--altin2));color:#1a1200;
  box-shadow:0 14px 34px -14px rgba(233,185,73,.6);
  opacity:0;visibility:hidden;transform:translateY(14px) scale(.9);transition:.28s}
.yukari.gor{opacity:1;visibility:visible;transform:none}
.yukari:hover{transform:translateY(-3px)}
.yukari svg{width:24px;height:24px}
@media(max-width:600px){.yukari{right:14px;bottom:14px;width:44px;height:44px}}