/* ============================================================
   home.css — Alternatif MODERN anasayfa (.hm kök altında scoped)
   Koyu + glassmorphism + aurora + scroll-reveal (her modül farklı geçiş)
   ============================================================ */
.hm{
    --hm-bg:#070b18; --hm-bg2:#0c1226; --hm-cam:rgba(255,255,255,.05); --hm-cam-cizgi:rgba(255,255,255,.10);
    --hm-yazi:#e8ecf6; --hm-soluk:#93a0bd; --hm-a1:#6366f1; --hm-a2:#06b6d4; --hm-a3:#ec4899;
    --hm-grad:linear-gradient(120deg,#6366f1,#06b6d4 55%,#ec4899);
    position:relative; background:var(--hm-bg); color:var(--hm-yazi);
    font-family:var(--font-govde,'Inter',system-ui,sans-serif); overflow-x:hidden;
}
.hm *{ box-sizing:border-box; }
.hm h1,.hm h2,.hm h3,.hm h4{ font-family:var(--font-baslik,'Inter',sans-serif); color:#fff; line-height:1.08; margin:0; letter-spacing:-.02em; }
.hm a{ color:inherit; text-decoration:none; }
.hm .hm-kap{ max-width:1240px; margin:0 auto; padding:0 24px; position:relative; z-index:2; }
.hm-grad-yazi{ background:var(--hm-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* aurora arkaplan */
.hm-aurora{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.hm-aurora span{ position:absolute; border-radius:50%; filter:blur(90px); opacity:.55; animation:hmFloat 18s ease-in-out infinite; }
.hm-aurora span:nth-child(1){ width:520px;height:520px; background:#6366f1; top:-120px; left:-80px; }
.hm-aurora span:nth-child(2){ width:460px;height:460px; background:#06b6d4; top:30%; right:-120px; animation-delay:-6s; }
.hm-aurora span:nth-child(3){ width:400px;height:400px; background:#ec4899; bottom:-120px; left:35%; animation-delay:-11s; }
@keyframes hmFloat{ 0%,100%{ transform:translate(0,0) scale(1);} 33%{ transform:translate(40px,-30px) scale(1.1);} 66%{ transform:translate(-30px,20px) scale(.95);} }

/* bölüm + scroll-reveal */
.hm-bolum{ position:relative; z-index:2; padding:110px 0; }
.hm-bas{ text-align:center; max-width:720px; margin:0 auto 56px; }
.hm-etiket{ display:inline-block; font-size:13px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; padding:7px 16px; border-radius:30px; border:1px solid var(--hm-cam-cizgi); background:var(--hm-cam); color:var(--hm-a2); margin-bottom:18px; }
.hm-bas h2{ font-size:clamp(28px,4.5vw,46px); font-weight:800; }
.hm-bas p{ color:var(--hm-soluk); font-size:17px; margin-top:14px; }
.hm-tumu{ display:inline-flex; align-items:center; gap:8px; margin-top:26px; font-weight:600; color:var(--hm-a2); }

.reveal{ opacity:0; transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); will-change:transform,opacity; }
.reveal.gor{ opacity:1; transform:none !important; }
.an-up{ transform:translateY(60px); }
.an-sol{ transform:translateX(-70px); }
.an-sag{ transform:translateX(70px); }
.an-zoom{ transform:scale(.82); }
.an-rot{ transform:rotate(-6deg) translateY(40px); }
.an-clip{ transform:translateY(40px); clip-path:inset(0 0 100% 0); transition:clip-path .9s cubic-bezier(.16,1,.3,1), opacity .9s, transform .9s; }
.an-clip.gor{ clip-path:inset(0 0 0 0); }
.g-1{ transition-delay:.05s } .g-2{ transition-delay:.13s } .g-3{ transition-delay:.21s } .g-4{ transition-delay:.29s } .g-5{ transition-delay:.37s } .g-6{ transition-delay:.45s }

/* ---------- HERO ---------- */
.hm-hero{ min-height:100vh; display:flex; align-items:center; position:relative; padding:120px 0 80px; }
.hm-hero-ic{ max-width:900px; }
.hm-hero .hm-rozet{ display:inline-flex; align-items:center; gap:9px; padding:8px 18px; border-radius:40px; background:var(--hm-cam); border:1px solid var(--hm-cam-cizgi); font-size:14px; color:var(--hm-soluk); margin-bottom:26px; backdrop-filter:blur(10px); }
.hm-rozet b{ color:#fff; } .hm-rozet .nokta{ width:8px;height:8px;border-radius:50%;background:#22c55e; box-shadow:0 0 0 4px rgba(34,197,94,.25); }
.hm-hero h1{ font-size:clamp(40px,7vw,84px); font-weight:900; letter-spacing:-.03em; }
.hm-hero p{ font-size:clamp(17px,2vw,21px); color:var(--hm-soluk); max-width:620px; margin:26px 0 38px; line-height:1.6; }
.hm-hero-btn{ display:flex; flex-wrap:wrap; gap:16px; }
.hm-btn{ display:inline-flex; align-items:center; gap:10px; padding:16px 32px; border-radius:14px; font-weight:700; font-size:16px; transition:.25s; border:1px solid transparent; }
.hm-btn-ana{ background:var(--hm-grad); color:#fff; background-size:180% 180%; box-shadow:0 12px 40px -12px var(--hm-a1); }
.hm-btn-ana:hover{ background-position:100% 0; transform:translateY(-3px); box-shadow:0 18px 50px -12px var(--hm-a1); }
.hm-btn-cam{ background:var(--hm-cam); border-color:var(--hm-cam-cizgi); color:#fff; backdrop-filter:blur(8px); }
.hm-btn-cam:hover{ background:rgba(255,255,255,.10); transform:translateY(-3px); }
.hm-hero-stat{ display:flex; gap:14px; flex-wrap:wrap; margin-top:56px; }
.hm-stat-pil{ padding:18px 26px; border-radius:18px; background:var(--hm-cam); border:1px solid var(--hm-cam-cizgi); backdrop-filter:blur(12px); }
.hm-stat-pil b{ display:block; font-size:30px; font-weight:800; background:var(--hm-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hm-stat-pil span{ font-size:13px; color:var(--hm-soluk); }
.hm-kaydir{ position:absolute; bottom:30px; left:50%; transform:translateX(-50%); color:var(--hm-soluk); font-size:13px; letter-spacing:.15em; display:flex; flex-direction:column; align-items:center; gap:8px; animation:hmBob 2s ease-in-out infinite; }
@keyframes hmBob{ 0%,100%{transform:translate(-50%,0)} 50%{transform:translate(-50%,10px)} }

/* ---------- HİZMETLER (bento) ---------- */
.hm-bento{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.hm-hizmet{ padding:34px; border-radius:22px; background:var(--hm-cam); border:1px solid var(--hm-cam-cizgi); position:relative; overflow:hidden; transition:.35s; }
.hm-hizmet:first-child{ grid-row:span 2; display:flex; flex-direction:column; justify-content:space-between; background:linear-gradient(160deg,rgba(99,102,241,.22),rgba(6,182,212,.10)); }
.hm-hizmet::after{ content:''; position:absolute; inset:0; background:radial-gradient(400px circle at var(--mx,50%) var(--my,0%),rgba(99,102,241,.25),transparent 60%); opacity:0; transition:.35s; }
.hm-hizmet:hover{ transform:translateY(-6px); border-color:rgba(99,102,241,.5); }
.hm-hizmet:hover::after{ opacity:1; }
.hm-hizmet .ikon{ width:56px;height:56px; border-radius:16px; display:grid; place-items:center; font-size:24px; color:#fff; background:var(--hm-grad); margin-bottom:22px; }
.hm-hizmet h4{ font-size:21px; margin-bottom:10px; }
.hm-hizmet p{ color:var(--hm-soluk); font-size:15px; line-height:1.65; }
.hm-hizmet-gorsel{ border-radius:16px; overflow:hidden; aspect-ratio:16/10; margin-bottom:22px; }
.hm-hizmet-gorsel img{ width:100%; height:100%; object-fit:cover; transition:.5s cubic-bezier(.16,1,.3,1); }
.hm-hizmet:hover .hm-hizmet-gorsel img{ transform:scale(1.06); }
.hm-hizmet:first-child .hm-hizmet-gorsel{ aspect-ratio:1/1; }

/* ---------- SAYAÇLAR ---------- */
.hm-sayac-serit{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.hm-sayac{ text-align:center; padding:36px 20px; border-radius:20px; background:var(--hm-cam); border:1px solid var(--hm-cam-cizgi); }
.hm-sayac .ikon{ font-size:26px; color:var(--hm-a2); margin-bottom:12px; }
.hm-sayac b{ font-size:clamp(38px,5vw,58px); font-weight:900; display:block; background:var(--hm-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hm-sayac span{ color:var(--hm-soluk); font-weight:600; }

/* ---------- PROJELER (showcase) ---------- */
.hm-proje-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.hm-galeri-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media(max-width:900px){ .hm-galeri-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .hm-galeri-grid{ grid-template-columns:1fr; } }
/* Foto galeri masonry (rastgele yükseklikler) */
.hm-mason{ columns:3; column-gap:20px; }
.hm-mason-oge{ display:block; position:relative; border-radius:18px; overflow:hidden; margin:0 0 20px; break-inside:avoid; border:1px solid var(--hm-cam-cizgi); }
.hm-mason-oge img{ width:100%; height:100%; object-fit:cover; transition:.6s cubic-bezier(.16,1,.3,1); }
.hm-mason-oge::after{ content:''; position:absolute; inset:0; background:linear-gradient(to top,rgba(7,11,24,.9),transparent 55%); }
.hm-mason-oge:hover img{ transform:scale(1.08); }
.hm-mason-yazi{ position:absolute; left:0; right:0; bottom:0; padding:20px; z-index:2; }
.hm-mason-yazi h4{ font-size:18px; }
.hm-mason-yazi span{ font-size:13px; color:var(--hm-a2); font-weight:600; display:inline-flex; align-items:center; gap:6px; margin-top:4px; }
@media(max-width:900px){ .hm-mason{ columns:2; } }
@media(max-width:560px){ .hm-mason{ columns:1; } }
.hm-proje{ position:relative; border-radius:22px; overflow:hidden; aspect-ratio:16/10; border:1px solid var(--hm-cam-cizgi); }
.hm-proje img{ width:100%; height:100%; object-fit:cover; transition:.6s cubic-bezier(.16,1,.3,1); }
.hm-proje::after{ content:''; position:absolute; inset:0; background:linear-gradient(to top,rgba(7,11,24,.92),rgba(7,11,24,.1) 60%); }
.hm-proje-yazi{ position:absolute; left:0; right:0; bottom:0; padding:28px; z-index:2; transform:translateY(14px); transition:.4s; }
.hm-proje-yazi span{ font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--hm-a2); }
.hm-proje-yazi h4{ font-size:23px; margin:8px 0 0; }
.hm-proje-yazi p{ color:var(--hm-soluk); font-size:14px; max-height:0; overflow:hidden; opacity:0; transition:.4s; margin:0; }
.hm-proje:hover img{ transform:scale(1.08); }
.hm-proje:hover .hm-proje-yazi{ transform:none; }
.hm-proje:hover .hm-proje-yazi p{ max-height:60px; opacity:1; margin-top:8px; }

/* ---------- BLOG ---------- */
.hm-blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.hm-blog{ border-radius:20px; overflow:hidden; background:var(--hm-cam); border:1px solid var(--hm-cam-cizgi); transition:.35s; }
.hm-blog:hover{ transform:translateY(-8px); border-color:rgba(6,182,212,.5); }
.hm-blog-img{ aspect-ratio:16/10; overflow:hidden; } .hm-blog-img img{ width:100%;height:100%;object-fit:cover; transition:.5s; }
.hm-blog:hover .hm-blog-img img{ transform:scale(1.07); }
.hm-blog-ic{ padding:24px; } .hm-blog-ic .tar{ font-size:13px; color:var(--hm-a2); font-weight:600; }
.hm-blog-ic h4{ font-size:18px; margin:10px 0; } .hm-blog-ic p{ color:var(--hm-soluk); font-size:14px; line-height:1.6; margin:0; }

/* ---------- EKİP ---------- */
.hm-ekip-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:22px; }
.hm-ekip{ text-align:center; }
.hm-ekip-foto{ width:150px; height:150px; margin:0 auto 18px; border-radius:50%; overflow:hidden; border:2px solid var(--hm-cam-cizgi); position:relative; transition:.4s; }
.hm-ekip-foto img{ width:100%;height:100%;object-fit:cover; transition:.5s; }
.hm-ekip:hover .hm-ekip-foto{ border-color:var(--hm-a1); transform:translateY(-6px) rotate(-3deg); box-shadow:0 20px 50px -18px var(--hm-a1); }
.hm-ekip:hover .hm-ekip-foto img{ transform:scale(1.1); }
.hm-ekip h4{ font-size:18px; } .hm-ekip span{ color:var(--hm-a2); font-size:14px; font-weight:600; }

/* ---------- GÖRÜŞLER (marquee) ---------- */
.hm-marq{ overflow:hidden; -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.hm-marq-track{ display:flex; gap:22px; width:max-content; animation:hmMarq 40s linear infinite; }
.hm-marq:hover .hm-marq-track{ animation-play-state:paused; }
@keyframes hmMarq{ to{ transform:translateX(-50%);} }
.hm-gorus{ width:380px; flex:0 0 auto; padding:30px; border-radius:20px; background:var(--hm-cam); border:1px solid var(--hm-cam-cizgi); }
.hm-gorus .yildiz{ color:#fbbf24; margin-bottom:14px; font-size:15px; }
.hm-gorus p{ color:var(--hm-yazi); font-size:15px; line-height:1.7; margin:0 0 18px; }
.hm-gorus-kisi{ display:flex; align-items:center; gap:12px; }
.hm-gorus-kisi img{ width:46px;height:46px;border-radius:50%;object-fit:cover; }
.hm-gorus-kisi b{ display:block; font-size:15px; color:#fff; } .hm-gorus-kisi small{ color:var(--hm-soluk); }

/* ---------- LOGO marquee (marka/referans) ---------- */
.hm-logo-marq{ overflow:hidden; -webkit-mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); }
.hm-logo-track{ display:flex; gap:24px; width:max-content; align-items:center; animation:hmMarq 60s linear infinite; padding:6px 0; }
.hm-logo-chip{ flex:0 0 auto; height:110px; display:flex; align-items:center; justify-content:center; padding:5px 5px; border-radius:10px; background:#fff; box-shadow:0 12px 30px -14px rgba(0,0,0,.55); transition:.3s; }
.hm-logo-chip:hover{ transform:translateY(-5px); box-shadow:0 18px 40px -14px rgba(99,102,241,.6); }
.hm-logo-chip img{ max-height:100%; max-width:100%; width:auto; object-fit:contain; border-radius:8px; }

/* ---------- VİDEO kapak play ---------- */
.hm-video-kapak{ position:relative; }
.hm-video-kapak .hm-play{ position:absolute; inset:0; margin:auto; width:64px; height:64px; border-radius:50%; background:rgba(99,102,241,.9); color:#fff; display:flex; align-items:center; justify-content:center; font-size:22px; padding-left:4px; transition:.3s; box-shadow:0 10px 30px -8px var(--hm-a1); }
.hm-blog:hover .hm-video-kapak .hm-play{ transform:scale(1.12); background:var(--hm-a1); }

/* ---------- SSS (accordion) ---------- */
.hm-sss{ display:flex; flex-direction:column; gap:14px; }
.hm-sss-oge{ background:var(--hm-cam); border:1px solid var(--hm-cam-cizgi); border-radius:16px; padding:4px 24px; transition:.3s; }
.hm-sss-oge[open]{ border-color:rgba(99,102,241,.5); background:rgba(99,102,241,.08); }
.hm-sss-oge summary{ list-style:none; cursor:pointer; padding:20px 0; font-weight:700; font-size:17px; color:#fff; display:flex; justify-content:space-between; align-items:center; gap:16px; }
.hm-sss-oge summary::-webkit-details-marker{ display:none; }
.hm-sss-oge summary i{ flex:0 0 auto; width:30px; height:30px; border-radius:50%; background:var(--hm-cam); display:flex; align-items:center; justify-content:center; font-size:13px; color:var(--hm-a2); transition:.3s; }
.hm-sss-oge[open] summary i{ transform:rotate(45deg); background:var(--hm-a1); color:#fff; }
.hm-sss-cevap{ color:var(--hm-soluk); font-size:15px; line-height:1.7; padding:0 0 22px; }

/* ---------- DOSYALAR ---------- */
.hm-dosya-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.hm-dosya{ display:flex; align-items:center; gap:18px; padding:22px 24px; border-radius:16px; background:var(--hm-cam); border:1px solid var(--hm-cam-cizgi); transition:.3s; }
.hm-dosya:hover{ transform:translateY(-4px); border-color:rgba(6,182,212,.5); }
.hm-dosya-ik{ flex:0 0 auto; width:52px; height:52px; border-radius:14px; background:var(--hm-grad); color:#fff; display:flex; align-items:center; justify-content:center; font-size:22px; }
.hm-dosya h4{ font-size:16px; margin:0 0 3px; } .hm-dosya p{ color:var(--hm-soluk); font-size:13px; margin:0; }

/* ---------- FAYDALI LİNKLER ---------- */
.hm-link-serit{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.hm-link-chip{ display:inline-flex; align-items:center; gap:9px; padding:13px 22px; border-radius:40px; background:var(--hm-cam); border:1px solid var(--hm-cam-cizgi); color:var(--hm-yazi); font-weight:600; font-size:15px; transition:.25s; }
.hm-link-chip:hover{ background:var(--hm-grad); border-color:transparent; color:#fff; transform:translateY(-3px); }
.hm-link-chip i{ color:var(--hm-a2); } .hm-link-chip:hover i{ color:#fff; }

/* ---------- PAKETLER (glass) ---------- */
.hm-paket-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:stretch; }
.hm-paket{ padding:38px 30px; border-radius:24px; background:var(--hm-cam); border:1px solid var(--hm-cam-cizgi); position:relative; transition:.35s; }
.hm-paket.one{ background:linear-gradient(165deg,rgba(99,102,241,.25),rgba(236,72,153,.12)); border-color:rgba(99,102,241,.5); transform:scale(1.04); box-shadow:0 30px 70px -30px var(--hm-a1); }
.hm-paket:hover{ transform:translateY(-8px); } .hm-paket.one:hover{ transform:scale(1.04) translateY(-8px); }
.hm-paket .rozet{ position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--hm-grad); color:#fff; font-size:12px; font-weight:700; padding:6px 16px; border-radius:20px; }
.hm-paket h4{ font-size:20px; } .hm-paket .acik{ color:var(--hm-soluk); font-size:14px; margin:8px 0 20px; min-height:40px; }
.hm-paket .fiyat{ font-size:44px; font-weight:900; color:#fff; } .hm-paket .fiyat small{ font-size:16px; color:var(--hm-soluk); font-weight:500; }
.hm-paket ul{ list-style:none; padding:0; margin:24px 0; }
.hm-paket li{ padding:9px 0; color:var(--hm-soluk); font-size:14px; display:flex; gap:10px; align-items:center; border-top:1px solid var(--hm-cam-cizgi); }
.hm-paket li i{ color:var(--hm-a2); } .hm-paket li:first-child{ border-top:none; }
.hm-paket .pbtn{ display:block; text-align:center; padding:14px; border-radius:12px; font-weight:700; background:var(--hm-cam); border:1px solid var(--hm-cam-cizgi); color:#fff; transition:.25s; }
.hm-paket.one .pbtn{ background:var(--hm-grad); border:none; }
.hm-paket .pbtn:hover{ transform:translateY(-2px); }

/* ---------- CTA ---------- */
.hm-cta{ margin:40px auto; max-width:1200px; border-radius:32px; padding:80px 40px; text-align:center; position:relative; overflow:hidden; background:linear-gradient(120deg,#6366f1,#06b6d4 60%,#ec4899); }
.hm-cta::before{ content:''; position:absolute; inset:0; background:radial-gradient(circle at 20% 20%,rgba(255,255,255,.25),transparent 40%); }
.hm-cta h2{ font-size:clamp(30px,5vw,52px); font-weight:900; position:relative; }
.hm-cta p{ color:rgba(255,255,255,.9); font-size:18px; margin:16px auto 32px; max-width:560px; position:relative; }
.hm-cta .hm-btn-cam{ background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.35); position:relative; }

.hm-alt{ text-align:center; padding:40px 0 60px; color:var(--hm-soluk); font-size:14px; position:relative; z-index:2; }
.hm-alt a{ color:var(--hm-a2); }

/* responsive */
@media(max-width:960px){
    .hm-bento,.hm-blog-grid,.hm-paket-grid{ grid-template-columns:1fr; }
    .hm-hizmet:first-child{ grid-row:auto; }
    .hm-proje-grid,.hm-ekip-grid,.hm-sayac-serit{ grid-template-columns:repeat(2,1fr); }
    .hm-bolum{ padding:70px 0; }
}
@media(max-width:560px){
    .hm-ekip-grid,.hm-sayac-serit,.hm-proje-grid,.hm-dosya-grid{ grid-template-columns:1fr; }
    .hm-hero h1{ font-size:44px; }
}