/* ============================================================ SELİMOĞLU MÜHENDİSLİK — style.css v2.1 Blueprint Dark + Light Aesthetic ------------------------------------------------------------ Bu dosya tüm sayfanın görsel stilini içerir. Önce CSS değişkenleri (renk, font, geçiş süreleri) tanımlanır, sonra her bölüm (preloader, navbar, hero, hizmetler, projeler, yılan oyunu, footer vb.) ayrı başlıklar altında düzenlenir. En sona da duyarlı (responsive) tasarım kuralları gelir. ============================================================ */ /* ---- Değişkenler — Karanlık Mod (varsayılan) ---- :root üzerinde tanımlanan CSS değişkenleri tüm dosya boyunca var(--ink), var(--gold) gibi kullanılır. Tema değişimi sadece bu değişkenlerin yeniden tanımlanmasıyla yapılır. */ :root { --ink: #060F1E; --navy: #0B1F3A; --navy-2: #0E2647; --navy-3: #162F55; --blue: #64A0DC; --blue-dim: rgba(100,160,220,0.15); --gold: #C8973A; --gold-2: #DBA94D; --gold-dim: rgba(200,151,58,0.12); --white: #F0F4FA; --gray: #8A9BB5; --border: rgba(100,160,220,0.18); --font-head: 'Bebas Neue', Impact, sans-serif; --font-mono: 'Space Mono', 'Courier New', monospace; --font-body: 'DM Sans', 'Helvetica Neue', sans-serif; --r: 12px; --tr: all .35s cubic-bezier(.25,.8,.25,1); --shadow: 0 8px 32px rgba(0,0,0,.35); } /* ---- Aydınlık Mod ---- niteliği aktif olduğunda renk değişkenleri burada yeniden tanımlanır; tüm sayfa anında açık tema'ya geçer. */ [data-theme="light"] { --ink: #F0F4FA; --navy: #E2EAF6; --navy-2: #D4DFF0; --navy-3: #C4D2E8; --white: #0B1F3A; --gray: #4A6080; --border: rgba(11,31,58,0.14); --blue-dim: rgba(100,160,220,0.10); --gold-dim: rgba(200,151,58,0.10); --shadow: 0 8px 32px rgba(0,0,0,.10); } /* ---- Reset ---- Tarayıcı varsayılan boşluk ve kenarlıklarını sıfırlar, tüm öğelerin border-box modeli kullanmasını sağlar. */ *,*::before,*::after { box-sizing:border-box; margin:0; padding:0; } html { scroll-behavior:smooth; } body { font-family: var(--font-body); background: var(--ink); color: var(--white); overflow-x: hidden; line-height: 1.7; cursor: none; transition: background .4s, color .4s; } [data-theme="light"] body { cursor: auto; } a { text-decoration:none; color:inherit; } ul { list-style:none; } img { max-width:100%; display:block; } /* ---- Yardımcı Sınıflar (Utilities) ---- Sıkça kullanılan düzen kuralları (container genişliği, bölüm dolgusu, başlık tipi, tag/etiket, vb.) burada tek seferde tanımlanır. */ .container { max-width:1200px; margin:0 auto; padding:0 24px; } .pos-rel { position:relative; z-index:2; } .section-pad{ padding:110px 0; } .w100 { width:100%; } .tag { display:inline-flex; align-items:center; gap:.5rem; font-family:var(--font-mono); font-size:.7rem; color:var(--gold); letter-spacing:.1em; text-transform:uppercase; margin-bottom:1rem; } .section-h2 { font-family: var(--font-head); font-size: clamp(2.4rem,5vw,3.8rem); line-height: 1.05; color: var(--white); letter-spacing: .02em; } .section-h2 em { color:var(--gold); font-style:normal; } .section-header { text-align:center; margin-bottom:72px; } .section-header .tag { display:block; margin:0 auto 1rem; } .section-desc { color:var(--gray); font-size:.95rem; margin-top:.8rem; } /* ---- Butonlar ---- Tüm sitedeki butonlar için temel stil + farklı varyantlar (.btn-gold = altın dolu, .btn-ghost = saydam, .btn-outline-gold). */ .btn { display:inline-flex; align-items:center; gap:.55rem; padding:14px 30px; border-radius:4px; font-family:var(--font-body); font-size:.9rem; font-weight:700; letter-spacing:.04em; cursor:pointer; border:2px solid transparent; transition:var(--tr); position:relative; overflow:hidden; } .btn::before { content:''; position:absolute; inset:0; background:rgba(255,255,255,.06); transform:scaleX(0); transform-origin:left; transition:transform .3s; } .btn:hover::before { transform:scaleX(1); } .btn-gold { background:var(--gold); color:var(--navy); border-color:var(--gold); } .btn-gold:hover { background:var(--gold-2); border-color:var(--gold-2); transform:translateY(-2px); box-shadow:0 8px 28px rgba(200,151,58,.35); } .btn-ghost { background:transparent; border-color:rgba(100,160,220,.4); color:var(--white); } .btn-ghost:hover { border-color:var(--blue); color:var(--blue); } .btn-outline-gold { background:transparent; border-color:var(--gold); color:var(--gold); } .btn-outline-gold:hover { background:var(--gold-dim); transform:translateY(-2px); } /* ============================================================ PRELOADER (Yükleme Ekranı) ------------------------------------------------------------ Sayfa açılışındaki yükleme katmanı: dönen logo, ilerleme barı ve değişen yazı. .hidden sınıfı eklenince yumuşakça kaybolur. ============================================================ */ .preloader { position:fixed; inset:0; z-index:9999; background:var(--ink); display:flex; align-items:center; justify-content:center; transition:opacity .6s, visibility .6s; } .preloader.hidden { opacity:0; visibility:hidden; } .pre-inner { display:flex; flex-direction:column; align-items:center; gap:20px; } .pre-logo { animation:preSpin 2s linear infinite; } @keyframes preSpin { to { transform:rotate(360deg); } } .pre-bar { width:180px; height:2px; background:rgba(100,160,220,.15); border-radius:2px; overflow:hidden; } .pre-fill { height:100%; width:0%; background:linear-gradient(90deg, var(--gold), var(--blue)); border-radius:2px; transition:width .3s; } .pre-text { font-family:var(--font-mono); font-size:.65rem; color:var(--gray); letter-spacing:.12em; } /* ============================================================ THEME TOGGLE (Karanlık/Aydınlık Geçiş Butonu) ------------------------------------------------------------ Sağ alttaki yuvarlak buton — tıklanınca güneş/ay ikonuyla tema değişir. Hover'da hafif genişler. ============================================================ */ .theme-toggle { position:fixed; top:50%; right:0; transform:translateY(-50%); z-index:1001; background:var(--gold); border:none; border-radius:8px 0 0 8px; width:40px; height:72px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; cursor:pointer; box-shadow:-3px 0 18px rgba(200,151,58,.35); transition:width .25s, background .3s; } .theme-toggle:hover { width:46px; background:var(--gold-2); } .tt-icon { font-size:1.05rem; color:#060F1E; transition:transform .4s; } .tt-label { font-size:.4rem; font-family:var(--font-mono); color:#060F1E; letter-spacing:.05em; text-transform:uppercase; writing-mode:vertical-rl; } /* ============================================================ CUSTOM CURSOR (Özel Fare İmleci) ------------------------------------------------------------ .cursor-dot küçük altın nokta (anında takip eder), .cursor-ring yumuşak gecikmeli halka (link/buton üstüne gelince büyür). Mobilde gizlenir. ============================================================ */ .cursor-dot { width:6px; height:6px; background:var(--gold); border-radius:50%; position:fixed; z-index:9999; pointer-events:none; transform:translate(-50%,-50%); transition:transform .1s; } .cursor-ring { width:32px; height:32px; border:1px solid rgba(200,151,58,.5); border-radius:50%; position:fixed; z-index:9998; pointer-events:none; transform:translate(-50%,-50%); transition:transform .12s, width .2s, height .2s, border-color .2s; } [data-theme="light"] .cursor-dot, [data-theme="light"] .cursor-ring { display:none; } /* ============================================================ NAVBAR (Üst Menü Çubuğu) ------------------------------------------------------------ Sayfanın üstünde sabit duran menü. Aşağı kaydırınca .scrolled sınıfıyla arkaplan koyulaşır. Mobilde hamburger menüye dönüşür. ============================================================ */ .navbar { position:fixed; top:0; left:0; right:0; z-index:1000; padding:20px 0; background:transparent; transition:background .4s, padding .4s, border-bottom .4s; } .navbar.scrolled { background:rgba(6,15,30,.96); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); padding:12px 0; border-bottom:1px solid var(--border); } [data-theme="light"] .navbar.scrolled { background:rgba(240,244,250,.96); } .nav-inner { max-width:1200px; margin:0 auto; padding:0 24px; display:flex; align-items:center; justify-content:space-between; } .nav-logo { display:flex; align-items:center; gap:10px; } .logo-text { display:flex; flex-direction:column; line-height:1.1; } .logo-main { font-family:var(--font-head); font-size:1.15rem; color:var(--white); letter-spacing:.08em; } .logo-sub { font-family:var(--font-mono); font-size:.55rem; color:var(--gold); letter-spacing:.18em; } .nav-links { display:flex; align-items:center; gap:1.6rem; } .nav-links a { font-size:.82rem; font-weight:500; color:rgba(240,244,250,.7); position:relative; padding:.2rem 0; transition:color .25s; } [data-theme="light"] .nav-links a { color:rgba(11,31,58,.65); } .nav-links a::after { content:''; position:absolute; bottom:-3px; left:0; width:0; height:1px; background:var(--gold); transition:width .3s; } .nav-links a:hover, .nav-links a.active { color:var(--white); } [data-theme="light"] .nav-links a:hover, [data-theme="light"] .nav-links a.active { color:#0B1F3A; } .nav-links a:hover::after { width:100%; } .nav-cta { background:transparent !important; border:1px solid var(--gold) !important; color:var(--gold) !important; padding:8px 18px !important; border-radius:4px !important; font-family:var(--font-mono) !important; font-size:.72rem !important; letter-spacing:.05em !important; } .nav-cta:hover { background:var(--gold-dim) !important; } .nav-cta::after { display:none !important; } .hamburger { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:4px; } .hamburger span { display:block; width:22px; height:1.5px; background:var(--white); border-radius:2px; transition:var(--tr); } [data-theme="light"] .hamburger span { background:#0B1F3A; } .hamburger.open span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); } .hamburger.open span:nth-child(2) { opacity:0; } .hamburger.open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); } /* ============================================================ HERO (Açılış Bölümü) ------------------------------------------------------------ Sayfanın en üstündeki büyük tanıtım alanı. Arkaplanda blueprint (mavi mimari çizim) SVG'si, üstte tarama çizgisi animasyonu, başlık, açıklama, butonlar ve istatistikler. ============================================================ */ .hero { position:relative; min-height:100vh; display:flex; align-items:center; overflow:hidden; background:var(--ink); } .hero-blueprint { position:absolute; inset:0; z-index:0; opacity:.9; } .bp-svg { width:100%; height:100%; position:absolute; inset:0; } .bp-building { animation:bpFadeIn 2s ease both; } .bp-compass { animation:bpFadeIn 2.5s .5s ease both; } @keyframes bpFadeIn { from { opacity:0; } to { opacity:1; } } /* Scan line */ .scan-line { position:absolute; left:0; right:0; height:1px; background:linear-gradient(to right, transparent, rgba(100,160,220,.25), transparent); z-index:1; pointer-events:none; animation:scanDown 9s linear infinite; } @keyframes scanDown { 0% { top:-2px; opacity:0; } 5% { opacity:1; } 95% { opacity:1; } 100% { top:100%; opacity:0; } } .hero::before { content:''; position:absolute; inset:0; z-index:1; background:radial-gradient(ellipse 80% 70% at 55% 50%, rgba(6,15,30,0) 0%, rgba(6,15,30,.6) 60%, rgba(6,15,30,.92) 100%); } [data-theme="light"] .hero::before { background:radial-gradient(ellipse 80% 70% at 55% 50%, rgba(240,244,250,0) 0%, rgba(240,244,250,.55) 60%, rgba(240,244,250,.92) 100%); } .hero::after { content:''; position:absolute; bottom:0; left:0; right:0; height:200px; z-index:1; background:linear-gradient(to top,var(--ink),transparent); } .hero-content { position:relative; z-index:3; max-width:1200px; margin:0 auto; padding:0 24px; padding-top:110px; } .hero-eyebrow { display:flex; align-items:center; gap:1rem; margin-bottom:1.5rem; animation:heroUp .8s ease both; } .eyebrow-line { flex:0 0 40px; height:1px; background:var(--gold); opacity:.6; } .eyebrow-text { font-family:var(--font-mono); font-size:.72rem; color:var(--gold); letter-spacing:.15em; text-transform:uppercase; } .hero-title { font-family:var(--font-head); font-size:clamp(3.5rem,10vw,8rem); line-height:.95; letter-spacing:.01em; margin-bottom:1.8rem; } .ht-line { display:block; color:var(--white); animation:heroUp .8s ease both; } .ht-line.gold { color:var(--gold); } .ht-line:nth-child(1) { animation-delay:.05s; } .ht-line:nth-child(2) { animation-delay:.15s; } .ht-line:nth-child(3) { animation-delay:.25s; } @keyframes heroUp { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:translateY(0); } } .hero-desc { font-size:clamp(.95rem,2vw,1.1rem); color:var(--gray); margin-bottom:2.2rem; line-height:1.65; animation:heroUp .8s .35s ease both; } .hero-btns { display:flex; gap:1rem; margin-bottom:3.5rem; flex-wrap:wrap; animation:heroUp .8s .5s ease both; } .hero-stats { display:flex; align-items:center; gap:0; background:rgba(11,31,58,.5); backdrop-filter:blur(8px); border:1px solid var(--border); border-radius:8px; overflow:hidden; animation:heroUp .8s .65s ease both; flex-wrap:wrap; } .hs-item { padding:18px 28px; text-align:center; flex:1; min-width:100px; } .hs-num { font-family:var(--font-head); font-size:2.4rem; color:var(--white); line-height:1; } .hs-plus { font-family:var(--font-head); font-size:1.4rem; color:var(--gold); } .hs-label{ display:block; font-size:.7rem; color:var(--gray); font-family:var(--font-mono); letter-spacing:.06em; margin-top:.2rem; text-transform:uppercase; } .hs-divider { width:1px; align-self:stretch; background:var(--border); flex-shrink:0; } .hero-scroll { position:absolute; bottom:36px; left:50%; transform:translateX(-50%); z-index:3; display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--gray); font-size:.68rem; font-family:var(--font-mono); letter-spacing:.1em; animation:heroUp 1s 1.2s ease both; } .scroll-wheel { width:20px; height:34px; border:1.5px solid var(--gold); border-radius:10px; display:flex; justify-content:center; padding-top:5px; } .scroll-dot { width:4px; height:8px; background:var(--gold); border-radius:2px; animation:scrollDown 1.6s ease infinite; } @keyframes scrollDown { 0% { transform:translateY(0); opacity:1; } 80% { transform:translateY(10px); opacity:0; } 100% { transform:translateY(0); opacity:0; } } /* ============================================================ TICKER (Kayan Yazı Şeridi) ------------------------------------------------------------ Hero altındaki sürekli sola kayan duyuru / hizmet metin şeridi. ============================================================ */ .ticker-wrap { overflow:hidden; border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--navy); padding:14px 0; } .ticker-track { display:flex; align-items:center; gap:0; white-space:nowrap; animation:tickerScroll 28s linear infinite; } .ticker-track span { font-family:var(--font-mono); font-size:.72rem; color:var(--gray); letter-spacing:.08em; text-transform:uppercase; padding:0 1.4rem; } .ticker-track .tk-sep { color:var(--gold); padding:0 .2rem; } @keyframes tickerScroll { from { transform:translateX(0); } to { transform:translateX(-50%); } } /* ============================================================ ABOUT (Hakkımızda Bölümü) ------------------------------------------------------------ Şirket tanıtımı: bina çizimi/SVG sol tarafta, sağda metin ve mühendis profil kartı. .check-item satırları öne çıkan maddeleri listeler. ============================================================ */ .about { background:var(--ink); } .about-layout { display:grid; grid-template-columns:1fr 1.1fr; gap:72px; align-items:center; } .about-drawing { position:relative; } .building-svg { width:100%; border-radius:var(--r); border:1px solid var(--border); } .about-content .body-text { color:var(--gray); margin-bottom:1rem; font-size:.95rem; } .about-checks { margin:1.6rem 0; display:flex; flex-direction:column; gap:.7rem; } .check-item { display:flex; align-items:center; gap:.75rem; color:var(--gray); font-size:.88rem; } .chk { width:22px; height:22px; flex-shrink:0; background:var(--gold-dim); border:1px solid rgba(200,151,58,.3); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--gold); font-size:.6rem; } /* Engineer Card */ .engineer-card { display:flex; align-items:flex-start; gap:16px; margin:1.6rem 0; padding:20px 22px; background:var(--navy); border:1px solid var(--border); border-left:3px solid var(--gold); border-radius:var(--r); } .eng-avatar { width:48px; height:48px; flex-shrink:0; border-radius:50%; background:var(--gold-dim); border:1px solid rgba(200,151,58,.4); display:flex; align-items:center; justify-content:center; color:var(--gold); font-size:1.3rem; } .eng-role { font-family:var(--font-mono); font-size:.62rem; color:var(--gold); letter-spacing:.12em; text-transform:uppercase; margin-bottom:.3rem; } .eng-name { display:block; color:var(--white); font-size:.98rem; font-weight:700; margin-bottom:.2rem; } .eng-title { display:block; color:var(--gray); font-size:.8rem; margin-bottom:.7rem; } .eng-tags { display:flex; flex-wrap:wrap; gap:.4rem; } .eng-tags span { padding:3px 10px; border:1px solid var(--border); border-radius:20px; font-size:.68rem; color:var(--blue); font-family:var(--font-mono); } /* ============================================================ SERVICES (Hizmetler Bölümü) ------------------------------------------------------------ 3'lü grid kart düzeni. Her kart bir hizmet türünü temsil eder (Mimari, Statik, Anahtar Teslim vb.). Üzerine gelince hafif yükselir ve altın çerçeve belirir. ============================================================ */ .services { position:relative; background:var(--navy); overflow:hidden; } .services-bg-lines { position:absolute; inset:0; pointer-events:none; } .services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; } .svc-card { background:var(--ink); border:1px solid var(--border); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column; transition:var(--tr); position:relative; } .svc-card:hover { transform:translateY(-6px); box-shadow:0 20px 60px rgba(0,0,0,.3); border-color:rgba(200,151,58,.4); } .svc-featured { border-color:rgba(200,151,58,.4); } .svc-badge { position:absolute; top:14px; right:14px; z-index:2; background:var(--gold); color:var(--navy); font-family:var(--font-mono); font-size:.6rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:4px 10px; border-radius:20px; } .svc-drawing { padding:20px; background:var(--navy-2); border-bottom:1px solid var(--border); } .svc-drawing svg { width:100%; } .svc-body { padding:24px; flex:1; } .svc-body h3 { font-family:var(--font-head); font-size:1.3rem; color:var(--white); margin-bottom:.6rem; letter-spacing:.04em; } .svc-gold { color:var(--gold); } .svc-body p { color:var(--gray); font-size:.85rem; margin-bottom:1rem; } .svc-body ul { display:flex; flex-direction:column; gap:.4rem; } .svc-body li { color:var(--gray); font-size:.82rem; padding-left:1rem; position:relative; font-family:var(--font-mono); font-size:.72rem; } .svc-body li::before { content:'→'; position:absolute; left:0; color:var(--gold); font-size:.7rem; } .svc-link { display:flex; align-items:center; gap:.5rem; padding:14px 24px; border-top:1px solid var(--border); font-family:var(--font-mono); font-size:.72rem; font-weight:700; color:var(--gold); letter-spacing:.05em; text-transform:uppercase; transition:var(--tr); } .svc-link:hover { background:var(--gold-dim); gap:.8rem; } /* ============================================================ ONGOING PROJECTS (Devam Eden Projeler) ------------------------------------------------------------ Her kart bir aktif şantiyeyi gösterir; üstte resim, altında ilerleme çubuğu (.og-fill) bulunur. Bar, görünür olunca --pct değişkeni kadar genişler. ============================================================ */ .ongoing { background:var(--ink); } .ongoing-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:28px; } .og-card { background:var(--navy); border:1px solid var(--border); border-radius:var(--r); overflow:hidden; transition:var(--tr); } .og-card:hover { transform:translateY(-4px); box-shadow:var(--shadow); border-color:rgba(200,151,58,.3); } .og-header { display:flex; justify-content:space-between; align-items:center; padding:14px 18px; border-bottom:1px solid var(--border); } .og-status { display:flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:.65rem; color:var(--gray); letter-spacing:.06em; } .status-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; } .status-dot.active { background:#25D366; box-shadow:0 0 6px rgba(37,211,102,.7); animation:pulseDot 1.8s ease infinite; } .status-dot.planning { background:var(--gold); box-shadow:0 0 6px rgba(200,151,58,.6); } @keyframes pulseDot { 0%,100% { box-shadow:0 0 4px rgba(37,211,102,.5); } 50% { box-shadow:0 0 12px rgba(37,211,102,.9); } } .og-cat { font-family:var(--font-mono); font-size:.62rem; letter-spacing:.08em; color:var(--blue); background:var(--blue-dim); border:1px solid rgba(100,160,220,.2); padding:3px 10px; border-radius:20px; text-transform:uppercase; } .og-vis { padding:0; overflow:hidden; } .og-vis svg { width:100%; display:block; } .og-body { padding:20px 18px; } .og-body h3 { font-family:var(--font-head); font-size:1.15rem; color:var(--white); margin-bottom:.5rem; letter-spacing:.04em; } .og-body p { color:var(--gray); font-size:.83rem; margin-bottom:1rem; } .og-progress { margin-bottom:1rem; } .og-prog-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:.4rem; } .og-prog-header span { font-family:var(--font-mono); font-size:.65rem; color:var(--gray); letter-spacing:.05em; } .og-pct { color:var(--gold) !important; font-weight:700 !important; } .og-bar { height:4px; background:var(--navy-3); border-radius:2px; overflow:hidden; } .og-fill { height:100%; width:var(--pct,0%); background:linear-gradient(90deg, var(--gold), var(--blue)); border-radius:2px; animation:fillBar .8s .3s ease both; } @keyframes fillBar { from { width:0%; } to { width:var(--pct); } } .og-meta { display:flex; gap:1.2rem; flex-wrap:wrap; } .og-meta span { display:flex; align-items:center; gap:.4rem; font-family:var(--font-mono); font-size:.63rem; color:var(--gray); } .og-meta i { color:var(--gold); font-size:.65rem; } /* ============================================================ COMPLETED PROJECTS (Tamamlanan Projeler) ------------------------------------------------------------ Filtreli proje galerisi. Üstte filtre butonları, altta resim kartları (.proj-card) — kategoriye göre gösterilip gizlenir. ============================================================ */ .projects { background:var(--navy); } .proj-filters { display:flex; gap:.6rem; margin-bottom:2.5rem; flex-wrap:wrap; justify-content:center; } .pf-btn { font-family:var(--font-mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; padding:8px 20px; border-radius:4px; border:1px solid var(--border); background:transparent; color:var(--gray); cursor:pointer; transition:var(--tr); } .pf-btn.active, .pf-btn:hover { border-color:var(--gold); color:var(--gold); background:var(--gold-dim); } .proj-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; } .proj-card { background:var(--navy-2); border:1px solid var(--border); border-radius:var(--r); overflow:hidden; transition:var(--tr); } .proj-card:hover { transform:translateY(-4px); box-shadow:var(--shadow); border-color:rgba(200,151,58,.3); } .proj-vis { position:relative; overflow:hidden; } .proj-vis svg { width:100%; display:block; transition:transform .4s; } .proj-card:hover .proj-vis svg { transform:scale(1.03); } .proj-tag { position:absolute; top:10px; left:10px; font-family:var(--font-mono); font-size:.6rem; letter-spacing:.08em; text-transform:uppercase; padding:4px 10px; border-radius:3px; background:rgba(6,15,30,.85); color:var(--gold); border:1px solid rgba(200,151,58,.3); } .proj-info { padding:16px 18px; } .proj-info h4 { font-family:var(--font-head); font-size:1rem; color:var(--white); margin-bottom:.25rem; } .proj-info p { color:var(--gray); font-size:.78rem; font-family:var(--font-mono); } /* ============================================================ PARTNERS (İş Ortakları / Logolar) ------------------------------------------------------------ Marka/iş ortağı logolarının gri tonda gösterildiği şerit. Hover'da renklenir. ============================================================ */ .partners { background:var(--ink); } .partners-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-bottom:48px; } .partner-card { background:var(--navy); border:1px solid var(--border); border-radius:var(--r); padding:28px 20px; text-align:center; transition:var(--tr); cursor:default; } .partner-card:hover { border-color:rgba(200,151,58,.4); transform:translateY(-4px); box-shadow:var(--shadow); } .partner-logo { width:80px; height:80px; margin:0 auto 16px; color:var(--gray); transition:color .3s; } .partner-card:hover .partner-logo { color:var(--gold); } .partner-logo svg { width:100%; height:100%; } .partner-info h4 { font-family:var(--font-head); font-size:.95rem; color:var(--white); margin-bottom:.25rem; letter-spacing:.04em; } .partner-info p { color:var(--gray); font-size:.75rem; font-family:var(--font-mono); } .partners-cta { text-align:center; padding:40px; background:var(--navy); border:1px solid var(--border); border-radius:var(--r); } .partners-cta p { color:var(--gray); margin-bottom:1.2rem; font-size:.95rem; } /* ============================================================ WHY US (Neden Biz?) ------------------------------------------------------------ "Bizi tercih sebepleri" maddeleri — ikon + başlık + kısa açıklama içeren küçük kart düzeni. ============================================================ */ .why-us { background:var(--navy); } .why-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; } .why-card { background:var(--navy-2); border:1px solid var(--border); border-radius:var(--r); padding:28px 24px; position:relative; overflow:hidden; transition:var(--tr); } .why-card:hover { border-color:rgba(200,151,58,.3); transform:translateY(-4px); } .why-num { font-family:var(--font-head); font-size:3.5rem; color:rgba(200,151,58,.06); position:absolute; top:12px; right:16px; line-height:1; letter-spacing:.02em; } .why-card i { font-size:1.4rem; color:var(--gold); margin-bottom:1rem; display:block; } .why-card h3 { font-family:var(--font-head); font-size:1.2rem; color:var(--white); margin-bottom:.6rem; letter-spacing:.04em; } .why-card p { color:var(--gray); font-size:.85rem; font-weight:300; } /* ============================================================ TESTIMONIALS (Müşteri Yorumları) ------------------------------------------------------------ Kayan kart slider'ı. transform:translateX ile sola kayar, önceki/sonraki butonları ve dokunmatik destek vardır. ============================================================ */ .testimonials { background:var(--ink); overflow:hidden; } .testi-slider { overflow:hidden; position:relative; } .testi-track { display:flex; gap:24px; transition:transform .5s cubic-bezier(.25,.8,.25,1); } .testi-card { flex:0 0 calc(50% - 12px); min-width:0; background:var(--navy); border:1px solid var(--border); border-radius:var(--r); padding:32px 28px; } .testi-stars { color:var(--gold); margin-bottom:1rem; font-size:.85rem; display:flex; gap:.2rem; } .testi-text { color:var(--gray); font-size:.9rem; line-height:1.75; margin-bottom:1.5rem; font-style:italic; } .testi-author { display:flex; align-items:center; gap:12px; } .testi-avatar { width:40px; height:40px; border-radius:50%; background:var(--gold-dim); border:1px solid rgba(200,151,58,.3); display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:.65rem; color:var(--gold); font-weight:700; flex-shrink:0; } .testi-author strong { display:block; color:var(--white); font-size:.88rem; margin-bottom:.1rem; } .testi-author span { color:var(--gray); font-size:.75rem; font-family:var(--font-mono); } .testi-dots { display:flex; gap:.5rem; justify-content:center; margin-top:1.8rem; } .testi-dot { width:8px; height:8px; border-radius:50%; background:var(--border); cursor:pointer; transition:var(--tr); border:none; } .testi-dot.active { background:var(--gold); transform:scale(1.3); } /* ============================================================ CONTACT (İletişim Bölümü) ------------------------------------------------------------ Solda iletişim bilgileri (telefon, e-posta, adres), sağda iletişim formu. Form gönderilince mailto: bağlantısı açılır. .form-ok yeşil onay kutusu. ============================================================ */ .contact { background:var(--ink); } .contact-grid { display:grid; grid-template-columns:1fr 1.1fr; gap:60px; align-items:start; } .cinfo-block { display:flex; align-items:flex-start; gap:16px; padding:18px 0; border-bottom:1px solid var(--border); } .cinfo-block:last-of-type { border-bottom:none; } .cinfo-icon { width:42px; height:42px; flex-shrink:0; background:var(--gold-dim); border:1px solid rgba(200,151,58,.3); border-radius:8px; display:flex; align-items:center; justify-content:center; color:var(--gold); font-size:1rem; } .cinfo-block strong { display:block; color:var(--white); font-size:.8rem; font-weight:700; font-family:var(--font-mono); letter-spacing:.06em; margin-bottom:.25rem; text-transform:uppercase; } .cinfo-block span, .cinfo-block a { color:var(--gray); font-size:.9rem; } .cinfo-block a:hover { color:var(--gold); } .direction-btn { margin:1.5rem 0; font-family:var(--font-mono); font-size:.75rem; } .map-wrap { border-radius:var(--r); overflow:hidden; border:1px solid var(--border); } .contact-form { background:var(--navy); border:1px solid var(--border); border-radius:var(--r); padding:40px 36px; } .form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; } .form-group { margin-bottom:18px; } label { display:block; font-family:var(--font-mono); font-size:.68rem; color:var(--gold); letter-spacing:.1em; text-transform:uppercase; margin-bottom:.5rem; } input, select, textarea { width:100%; padding:12px 16px; background:rgba(6,15,30,.7); border:1px solid var(--border); border-radius:6px; font-family:var(--font-body); font-size:.9rem; color:var(--white); outline:none; transition:border-color .25s, box-shadow .25s; } [data-theme="light"] input, [data-theme="light"] select, [data-theme="light"] textarea { background:rgba(240,244,250,.8); color:#0B1F3A; } input:focus, select:focus, textarea:focus { border-color:rgba(200,151,58,.5); box-shadow:0 0 0 3px rgba(200,151,58,.08); } input::placeholder, textarea::placeholder { color:var(--gray); } select option { background:var(--navy); color:var(--white); } [data-theme="light"] select option { background:#E2EAF6; color:#0B1F3A; } textarea { resize:vertical; } input.error { border-color:rgba(220,60,60,.6) !important; } .form-ok { display:none; margin-top:1rem; background:rgba(39,174,96,.1); border:1px solid rgba(39,174,96,.3); color:#4cde80; border-radius:6px; padding:12px 16px; font-size:.85rem; align-items:center; gap:.5rem; font-family:var(--font-mono); } .form-ok.show { display:flex; } /* ============================================================ FOOTER (Alt Bilgi) ------------------------------------------------------------ Logo, kısa açıklama, hızlı linkler, iletişim ve sosyal medya ikonlarını içerir. Alt kısımda telif bilgisi. ============================================================ */ .footer { background:var(--navy); border-top:1px solid var(--border); padding:72px 0 0; } .footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1.5fr; gap:48px; padding-bottom:56px; border-bottom:1px solid var(--border); } .footer-brand p { color:var(--gray); font-size:.85rem; max-width:240px; margin-top:.5rem; } .footer-social { display:flex; gap:.6rem; margin-top:1.2rem; } .footer-social a { width:36px; height:36px; border:1px solid var(--border); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--gray); font-size:.85rem; transition:var(--tr); } .footer-social a:hover { border-color:var(--gold); color:var(--gold); } .footer-col h5 { font-family:var(--font-mono); font-size:.68rem; color:var(--gold); letter-spacing:.12em; text-transform:uppercase; margin-bottom:1.2rem; } .footer-col ul { display:flex; flex-direction:column; gap:.5rem; } .footer-col li a { color:var(--gray); font-size:.85rem; transition:color .25s; } .footer-col li a:hover { color:var(--white); } .fc-text { color:var(--gray); font-size:.83rem; display:flex; align-items:flex-start; gap:.55rem; margin-bottom:.55rem; } .fc-text i { color:var(--gold); margin-top:3px; flex-shrink:0; } .fc-text a { color:var(--gray); } .fc-text a:hover { color:var(--gold); } .footer-bottom { padding:20px 0; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.5rem; } .footer-bottom p { color:rgba(138,155,181,.4); font-size:.78rem; } .footer-code { font-family:var(--font-mono) !important; font-size:.65rem !important; } /* ============================================================ FLOATING BUTTONS (Yüzen Aksiyon Butonları) ------------------------------------------------------------ Sağ alttaki sabit konumlu hızlı erişim butonları (örn. yukarı çık oku). .visible sınıfı eklenince görünür olur. ============================================================ */ .fab-wp, .fab-call { position:fixed; z-index:900; border-radius:50%; width:54px; height:54px; display:flex; align-items:center; justify-content:center; font-size:1.2rem; transition:transform .25s, box-shadow .25s; border:none; } .fab-wp { bottom:88px; right:22px; background:#25D366; color:#fff; box-shadow:0 4px 20px rgba(37,211,102,.4); position:relative; } .fab-wp { position:fixed; bottom:88px; right:22px; } .fab-call { bottom:22px; right:22px; background:var(--gold); color:var(--navy); box-shadow:0 4px 20px rgba(200,151,58,.4); } .fab-wp:hover, .fab-call:hover { transform:scale(1.1); } /* WhatsApp pulse ring */ .fab-pulse { position:absolute; inset:-4px; border-radius:50%; border:2px solid #25D366; animation:fabPulse 2s ease infinite; } @keyframes fabPulse { 0% { transform:scale(1); opacity:.8; } 100% { transform:scale(1.7); opacity:0; } } /* Scroll to top */ .scroll-top { position:fixed; bottom:152px; right:22px; z-index:900; width:40px; height:40px; border-radius:50%; background:var(--navy-3); border:1px solid var(--border); color:var(--gray); font-size:.8rem; display:flex; align-items:center; justify-content:center; cursor:pointer; opacity:0; pointer-events:none; transition:opacity .3s, transform .3s, background .3s; } .scroll-top.visible { opacity:1; pointer-events:auto; } .scroll-top:hover { background:var(--gold); color:var(--navy); border-color:var(--gold); transform:translateY(-2px); } /* Mobile sticky bar */ .mob-bar { display:none; position:fixed; bottom:0; left:0; right:0; z-index:999; background:rgba(6,15,30,.97); border-top:1px solid var(--border); padding:8px 8px; gap:6px; padding-bottom: env(safe-area-inset-bottom, 8px); } [data-theme="light"] .mob-bar { background:rgba(240,244,250,.97); } .mob-bar a, .mob-bar button { flex:1; display:flex; align-items:center; justify-content:center; gap:.4rem; padding:10px 4px; border-radius:6px; font-size:.75rem; font-weight:700; font-family:var(--font-mono); letter-spacing:.03em; text-decoration:none; border:none; cursor:pointer; flex-direction:column; } .mob-bar a i, .mob-bar button i { font-size:1.2rem; } .mob-bar .mc { background:var(--gold); color:var(--navy); } .mob-bar .mw { background:#25D366; color:#fff; } .mob-bar .mi { background:linear-gradient(135deg,#f58529,#dd2a7b,#8134af); color:#fff; } .mob-bar .mf { background:#1877F2; color:#fff; } .mob-bar .mt { background:var(--navy-3); border:1px solid var(--border); color:var(--gray); } /* ============================================================ SCROLL REVEAL (Kaydırarak Görünüm Animasyonu) ------------------------------------------------------------ .reveal-up / .reveal-left / .reveal-right öğeleri başlangıçta gizlidir. JS ile .visible sınıfı eklenince yumuşakça belirir. ============================================================ */ .reveal-up { opacity:0; transform:translateY(36px); transition:opacity .7s ease, transform .7s ease; } .reveal-up.visible { opacity:1; transform:translateY(0); } .reveal-left { opacity:0; transform:translateX(-36px); transition:opacity .7s ease, transform .7s ease; } .reveal-left.visible { opacity:1; transform:translateX(0); } .reveal-right { opacity:0; transform:translateX(36px); transition:opacity .7s ease, transform .7s ease; } .reveal-right.visible { opacity:1; transform:translateX(0); } /* ============================================================ RESPONSIVE (Duyarlı Tasarım — Mobil/Tablet) ------------------------------------------------------------ Belirli ekran genişlikleri altında düzeni yeniden ayarlar: gridler tek sütuna düşer, font boyları küçülür, hamburger menü görünür, butonlar genişler vb. ============================================================ */ @media (max-width:1100px) { .partners-grid { grid-template-columns:repeat(3,1fr); } } @media (max-width:1024px) { .about-layout { grid-template-columns:1fr; gap:48px; } .services-grid { grid-template-columns:1fr; max-width:520px; margin:0 auto; } .why-grid { grid-template-columns:repeat(2,1fr); } .proj-grid { grid-template-columns:repeat(2,1fr); } .footer-grid { grid-template-columns:1fr 1fr; gap:36px; } .contact-grid { grid-template-columns:1fr; } .ongoing-grid { grid-template-columns:1fr 1fr; } .testi-card { flex:0 0 calc(80% - 12px); } } @media (max-width:768px) { .section-pad { padding:72px 0; } .nav-links { display:none; flex-direction:column; position:absolute; top:100%; left:0; right:0; background:rgba(6,15,30,.98); border-bottom:1px solid var(--border); padding:24px; gap:1.4rem; max-height:80vh; overflow-y:auto; } [data-theme="light"] .nav-links { background:rgba(240,244,250,.98); } .nav-links.open { display:flex; } .hamburger { display:flex; } body { cursor:auto; } .cursor-dot, .cursor-ring { display:none; } .hero-title { font-size:clamp(3rem,12vw,5rem); } .hero-stats { flex-direction:row; flex-wrap:wrap; } .hs-item { padding:12px 20px; } .why-grid { grid-template-columns:1fr; } .proj-grid { grid-template-columns:1fr; } .ongoing-grid { grid-template-columns:1fr; } .partners-grid{ grid-template-columns:repeat(2,1fr); } .footer-grid { grid-template-columns:1fr; gap:28px; } .hero-btns { flex-direction:column; } .hero-btns .btn { width:100%; justify-content:center; } /* fab butonlar mobilde görünür kalır */ .theme-toggle { top:auto; bottom:80px; transform:none; } .mob-bar { display:flex; } body { padding-bottom:72px; } .form-row { grid-template-columns:1fr; } .footer-bottom { flex-direction:column; text-align:center; } .testi-card { flex:0 0 calc(90% - 12px); } .testi-track { gap:16px; } } @media (max-width:540px) { .partners-grid { grid-template-columns:repeat(2,1fr); } .hero-stats { display:block; } .hs-item { display:flex; align-items:center; gap:.5rem; padding:10px 0; border-bottom:1px solid var(--border); } .hs-item:last-child { border-bottom:none; } .hs-num { font-size:1.8rem; } .hs-label { margin-top:0; } .hs-divider{ display:none; } .contact-form { padding:24px 16px; } .testi-card { flex:0 0 calc(95% - 12px); } .section-header { margin-bottom:48px; } .og-meta { flex-direction:column; gap:.5rem; } } @media (max-width:380px) { .partners-grid { grid-template-columns:1fr 1fr; gap:12px; } .partner-card { padding:18px 12px; } } /* ---- Yazdırma (Print) ---- Sayfa yazdırılırken navbar, butonlar ve dekoratif öğeler gizlenir. */ @media print { .cursor-dot, .cursor-ring, .theme-toggle, .mob-bar, .preloader { display:none !important; } } /* ============================================================ SNAKE GAME SECTION (Yılan Oyunu Bölümü) ------------------------------------------------------------ Nokia 3310 stili yılan oyununun tüm görsel stilleri: skor tablosu, oyun alanı (canvas), kontrol butonları ve mobil yön (D-pad) tuşları. ============================================================ */ .snake-section { background: var(--navy); } .snake-wrapper { display: flex; justify-content: center; align-items: flex-start; gap: 24px; } .snake-panel { background: var(--ink); border: 1px solid var(--border); border-radius: var(--r); padding: 28px 24px 24px; width: 100%; max-width: 560px; display: flex; flex-direction: column; gap: 16px; } /* CANLI SKOR TABLOSU PANELI */ .snake-leaderboard { background: var(--ink); border: 1px solid var(--border); border-radius: var(--r); padding: 20px 16px 16px; min-width: 220px; max-width: 260px; width: 100%; position: relative; display: flex; flex-direction: column; gap: 10px; max-height: 520px; overflow-y: auto; } .snake-lb-header { font-family: var(--font-mono); font-size: .72rem; color: var(--gold); letter-spacing: .12em; text-transform: uppercase; display: flex; align-items: center; gap: .5rem; border-bottom: 1px solid rgba(200,151,58,.2); padding-bottom: 10px; } .snake-lb-body { display: flex; flex-direction: column; gap: 6px; } .snake-lb-loading { font-family: var(--font-mono); font-size: .8rem; color: var(--gray); text-align: center; padding: 12px 0; } .snake-lb-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; background: var(--navy); border: 1px solid var(--border); font-family: var(--font-mono); font-size: .78rem; } .snake-lb-row.lb-gold { border-color: rgba(200,151,58,.4); background: rgba(200,151,58,.07); } .snake-lb-rank { color: var(--gold); min-width: 22px; text-align: center; font-size: .85rem; } .snake-lb-name { flex: 1; color: var(--white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .snake-lb-score { color: var(--gold); font-weight: 700; } .snake-lb-refresh { position: absolute; top: 14px; right: 12px; background: none; border: none; cursor: pointer; color: var(--gray); font-size: .85rem; transition: color .2s, transform .4s; padding: 2px; } .snake-lb-refresh:hover { color: var(--gold); transform: rotate(180deg); } /* SNAKE RESPONSIVE */ @media (max-width: 900px) { .snake-wrapper { flex-direction: column; align-items: center; } .snake-leaderboard { max-width: 560px; width: 100%; max-height: 300px; display: flex !important; } } @media (max-width: 768px) { .snake-wrapper { justify-content: center; flex-direction: column; align-items: center; } .snake-panel { max-width: 100%; padding: 16px 12px; } .snake-val { font-size: 1.4rem; } .dpad-btn { width: 42px; height: 42px; font-size: 1rem; } .snake-leaderboard { max-width: 100%; width: 100%; display: flex !important; max-height: 260px; } .snake-lb-row { padding: 7px 8px; } } @media (max-width: 480px) { .snake-leaderboard { max-width: 100%; width: 100%; display: flex !important; max-height: 240px; } .snake-dpad { margin-top: 8px; } .dpad-btn { width: 46px; height: 46px; font-size: 1.1rem; border-radius: 10px; } } .snake-scoreboard { display: flex; gap: 16px; justify-content: center; } .snake-stat { flex: 1; text-align: center; padding: 12px; background: var(--navy); border: 1px solid var(--border); border-radius: 8px; } /* Geniş skor kutusu (rekor sahibi ismini gösterir) */ .snake-stat-wide { flex: 2; } .best-score-num { display: inline-block; font-family: var(--font-mono); font-size: .9rem; color: var(--gray); margin-left: .35rem; } .snake-label { display: block; font-family: var(--font-mono); font-size: .6rem; color: var(--gray); letter-spacing: .12em; text-transform: uppercase; margin-bottom: .3rem; } .snake-val { font-family: var(--font-head); font-size: 2rem; color: var(--white); line-height: 1; } .snake-val.gold { color: var(--gold); } .snake-canvas-wrap { position: relative; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; line-height: 0; } #snakeCanvas { display: block; width: 100%; height: auto; touch-action: none; } .snake-msg { position: absolute; inset: 0; background: rgba(6,15,30,.88); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; font-family: var(--font-mono); font-size: .85rem; color: var(--white); text-align: center; padding: 16px; } .snake-msg b { color: var(--gold); font-size: 1.4rem; } /* ===== ÖLÜM EKRANI MODALI ===== Oyuncu kaybedince fotoğraf ve "KAYBETTİNİZ" yazısı tüm ekranı kaplar (fotoğraf ekranın yarısı kadar gösterilir). */ .death-overlay { position: fixed; inset: 0; z-index: 9999; background: rgba(6, 15, 30, .94); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 1.2rem; padding: 24px; overflow-y: auto; animation: deathFadeIn .35s ease both; } @keyframes deathFadeIn { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } } /* Fotoğraf ekranın yarısı kadar (yükseklik 50vh) ve mobilde de düzgün ölçeklenir */ .death-overlay .death-img { width: auto; height: 50vh; max-width: 90vw; object-fit: cover; border-radius: 14px; border: 3px solid var(--gold); box-shadow: 0 20px 60px rgba(0,0,0,.55); } .death-overlay .death-title { font-family: var(--font-head); font-size: clamp(2.4rem, 8vw, 4.6rem); letter-spacing: .04em; color: var(--gold); text-shadow: 0 4px 22px rgba(200,151,58,.45); } .death-overlay .death-score { font-family: var(--font-mono); font-size: clamp(.95rem, 2.4vw, 1.2rem); color: var(--white); } .death-overlay .death-score b { color: var(--gold); } .death-overlay .death-actions { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-top: .4rem; } .death-overlay .death-actions .btn { min-width: 160px; justify-content: center; } /* Yeni rekor isim girişi */ .death-overlay .death-form { display: flex; flex-direction: column; gap: .55rem; align-items: center; background: rgba(11,31,58,.5); border: 1px solid var(--border); border-radius: 10px; padding: 14px 18px; } .death-overlay .death-form label { font-family: var(--font-mono); font-size: .72rem; color: var(--gold); letter-spacing: .1em; text-transform: uppercase; } .death-overlay .death-form input { font-family: var(--font-body); font-size: 1rem; padding: 10px 14px; border-radius: 6px; border: 1px solid var(--border); background: var(--ink); color: var(--white); text-align: center; min-width: 220px; outline: none; } .death-overlay .death-form input:focus { border-color: var(--gold); } /* Mobil ölçek ayarı: fotoğraf hâlâ yarı ekran ama dikey alanı kontrollü kullansın */ @media (max-width: 600px) { .death-overlay { gap: .7rem; padding: 12px 10px; justify-content: flex-start; overflow-y: auto; -webkit-overflow-scrolling: touch; } .death-overlay .death-img { height: 28vh; max-width: 80vw; } .death-overlay .death-title { font-size: clamp(2rem, 10vw, 3.2rem); } .death-overlay .death-actions .btn { min-width: 120px; padding: 11px 14px; font-size: .82rem; } .death-overlay .death-form input { min-width: 180px; font-size: .95rem; } /* Çark canvas boyutu mobilde küçülsün */ .death-overlay canvas { max-width: 180px !important; max-height: 180px !important; } } @media (max-width: 380px) { .death-overlay { padding: 10px 8px; gap: .55rem; } .death-overlay .death-img { height: 22vh; } .death-overlay canvas { max-width: 150px !important; max-height: 150px !important; } } /* ===== GLOBAL SKOR TABLOSU (Yılan Oyunu Ölüm Ekranı) ===== */ .death-leaderboard { background: rgba(11,31,58,.7); border: 1px solid rgba(200,151,58,.3); border-radius: 12px; padding: 14px 18px; min-width: min(280px, 92vw); max-width: 400px; width: 100%; max-height: 220px; overflow-y: auto; box-sizing: border-box; } .death-lb-title { font-family: var(--font-mono); font-size: .72rem; color: var(--gold); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 10px; text-align: center; } .death-lb-loading, .death-lb-empty { font-family: var(--font-mono); font-size: .8rem; color: var(--gray); text-align: center; padding: 8px 0; } .death-lb-table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: .78rem; } .death-lb-table thead th { color: var(--gold); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; padding: 4px 8px; border-bottom: 1px solid rgba(200,151,58,.2); text-align: left; } .death-lb-table tbody tr { border-bottom: 1px solid rgba(255,255,255,.05); } .death-lb-table tbody td { padding: 5px 8px; color: var(--white); } .death-lb-table .lb-top td { color: var(--gold); font-weight: 700; } .death-lb-table tbody b { color: var(--gold); } /* ===== TELEFON BLOĞU İSİM ETİKETİ ===== */ .phone-line { display: inline-block; line-height: 1.55; } .phone-name { display: inline-block; font-family: var(--font-mono); font-size: .72rem; color: var(--gold); letter-spacing: .06em; text-transform: uppercase; margin-right: .25rem; } .snake-controls { display: flex; } /* D-Pad */ .snake-dpad { display: flex; flex-direction: column; align-items: center; gap: 4px; } .dpad-row { display: flex; gap: 4px; align-items: center; justify-content: center; } .dpad-btn { width: 44px; height: 44px; background: var(--navy-2); border: 1px solid var(--border); border-radius: 8px; color: var(--white); font-size: .9rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s, transform .1s; -webkit-tap-highlight-color: transparent; user-select: none; } .dpad-btn:active, .dpad-btn:hover { background: var(--gold); color: var(--navy); transform: scale(.92); } .dpad-center { background: transparent; border-color: transparent; pointer-events: none; } .snake-hint { text-align: center; font-family: var(--font-mono); font-size: .65rem; color: var(--gray); letter-spacing: .05em; } /* ============================================================ FOOTER Z.K. CREDIT (Geliştirici Bilgi Linki) ------------------------------------------------------------ Footer alt kısmındaki "Z.K." imza linki — hover'da altın parıldama efekti uygulanır. ============================================================ */ .footer-made-wrap { display: flex; align-items: center; gap: .8rem; justify-content: center; width: 100%; margin-top: .6rem; } .footer-made-line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(200,151,58,0.3), transparent); max-width: 120px; } .footer-made { color: rgba(138,155,181,.5) !important; font-size: .72rem !important; font-family: var(--font-mono) !important; text-align: center; margin: 0 !important; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; justify-content: center; } .footer-zk-badge { display: inline-flex; align-items: center; justify-content: center; position: relative; } .footer-zk-inner { color: var(--gold); font-weight: 800; font-size: .85rem; letter-spacing: .12em; font-family: var(--font-head); background: linear-gradient(135deg, rgba(200,151,58,0.15), rgba(200,151,58,0.05)); border: 1px solid rgba(200,151,58,0.4); border-radius: 6px; padding: .15rem .5rem; position: relative; transition: all .3s ease; box-shadow: 0 0 10px rgba(200,151,58,0.15); } .footer-zk-inner:hover { background: linear-gradient(135deg, rgba(200,151,58,0.3), rgba(200,151,58,0.1)); box-shadow: 0 0 20px rgba(200,151,58,0.4); transform: scale(1.05); } @keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.5; } } @keyframes fadeInUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } } /* ============================================================ FLOATING BUTTONS — INSTAGRAM & FACEBOOK ------------------------------------------------------------ Yüzen sosyal medya butonları (Instagram + Facebook) için konum, renk ve hover animasyonları. ============================================================ */ .fab-insta, .fab-fb { position: fixed; z-index: 900; border-radius: 50%; width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; transition: transform .25s, box-shadow .25s; border: none; right: 22px; color: #fff; } .fab-insta { bottom: 234px; background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); box-shadow: 0 4px 20px rgba(220,39,67,.4); } .fab-fb { bottom: 161px; background: #1877F2; box-shadow: 0 4px 20px rgba(24,119,242,.4); } .fab-insta:hover, .fab-fb:hover { transform: scale(1.1); } /* fab-insta ve fab-fb mobilde de görünür */ /* ============================================================ ENGINEER PHONE (Mühendis Telefon Bağlantısı) ------------------------------------------------------------ Hakkımızda bölümündeki mühendis kartında telefon numarası linkinin görsel stili. ============================================================ */ .eng-phone { display: inline-flex; align-items: center; gap: .4rem; margin-top: .4rem; font-size: .85rem; color: var(--gold); font-family: var(--font-mono); letter-spacing: .04em; } .eng-phone i { font-size: .8rem; } .eng-phone:hover { color: var(--gold-2); } /* ============================================================ ANAHTAR TESLİM SECTION (Anahtar Teslim Hizmet Bölümü) ------------------------------------------------------------ "Anahtar teslim proje" hizmetini öne çıkaran özel bölüm stilleri (arka plan, başlık ve madde sıralaması). ============================================================ */ .anahtar-section { background: var(--ink); } .anahtar-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; margin-bottom: 64px; } /* Scope */ .anahtar-scope-title { font-family: var(--font-head); font-size: 1.3rem; color: var(--white); letter-spacing: .04em; margin-bottom: 1.5rem; display: flex; align-items: center; gap: .6rem; } .anahtar-scope-title i { color: var(--gold); } .anahtar-list { list-style: none; display: flex; flex-direction: column; gap: 1.1rem; margin-bottom: 2rem; } .anahtar-list li { display: flex; align-items: flex-start; gap: 1rem; padding: 14px 18px; background: var(--navy); border: 1px solid var(--border); border-radius: var(--r); transition: var(--tr); } .anahtar-list li:hover { border-color: rgba(200,151,58,.35); transform: translateX(4px); } .al-icon { width: 38px; height: 38px; flex-shrink: 0; background: var(--gold-dim); border: 1px solid rgba(200,151,58,.3); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--gold); font-size: .95rem; } .anahtar-list li div { display: flex; flex-direction: column; gap: .2rem; } .anahtar-list li strong { color: var(--white); font-size: .9rem; font-weight: 700; } .anahtar-list li span { color: var(--gray); font-size: .8rem; line-height: 1.5; } .anahtar-badge { display: flex; align-items: flex-start; gap: 1rem; padding: 18px 20px; background: var(--gold-dim); border: 1px solid rgba(200,151,58,.35); border-radius: var(--r); } .anahtar-badge i { color: var(--gold); font-size: 1.2rem; margin-top: 2px; flex-shrink: 0; } .anahtar-badge span { color: var(--white); font-size: .88rem; line-height: 1.6; } /* Cards */ .anahtar-cards { display: flex; flex-direction: column; gap: 20px; } .ak-card { background: var(--navy); border: 1px solid var(--border); border-radius: var(--r); padding: 28px 24px; transition: var(--tr); position: relative; overflow: hidden; } .ak-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--blue); border-radius: 3px 0 0 3px; } .ak-card--gold::before { background: var(--gold); } .ak-card:hover { border-color: rgba(100,160,220,.35); transform: translateY(-3px); box-shadow: var(--shadow); } .ak-card--gold:hover { border-color: rgba(200,151,58,.35); } .ak-icon { width: 48px; height: 48px; background: var(--blue-dim); border: 1px solid rgba(100,160,220,.25); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--blue); font-size: 1.2rem; margin-bottom: 1rem; } .ak-card--gold .ak-icon { background: var(--gold-dim); border-color: rgba(200,151,58,.25); color: var(--gold); } .ak-card h4 { font-family: var(--font-head); font-size: 1.1rem; color: var(--white); letter-spacing: .04em; margin-bottom: .5rem; } .ak-card p { color: var(--gray); font-size: .85rem; line-height: 1.7; font-weight: 300; } /* CTA */ .anahtar-cta { text-align: center; padding: 48px 32px; background: var(--navy); border: 1px solid var(--border); border-radius: var(--r); display: flex; flex-direction: column; align-items: center; gap: 1.2rem; } .anahtar-cta p { font-size: 1.1rem; color: var(--white); font-weight: 500; max-width: 500px; } .anahtar-cta .btn { margin: 0 .4rem; } /* Responsive */ @media (max-width: 900px) { .anahtar-layout { grid-template-columns: 1fr; gap: 40px; } .anahtar-cta { padding: 32px 20px; } .anahtar-cta .btn { width: 100%; justify-content: center; margin: .2rem 0; } } /* Light mode adjustments */ [data-theme="light"] .anahtar-list li { background: var(--navy); } [data-theme="light"] .ak-card { background: var(--navy); } [data-theme="light"] .anahtar-cta { background: var(--navy); } /* ============================================================ HERO SLOGAN ============================================================ */ .hero-slogan { display: block; font-family: var(--font-mono); font-size: .75rem; letter-spacing: .08em; color: var(--gold); margin-bottom: .5rem; text-transform: uppercase; } /* ============================================================ SVC ENGINEER MINI — Harita kartı içi mühendis bilgisi ============================================================ */ .svc-engineer-mini { display: flex; align-items: flex-start; gap: 10px; margin-top: 1rem; padding: 10px 14px; background: rgba(200,151,58,.08); border: 1px solid rgba(200,151,58,.25); border-radius: 8px; font-size: .82rem; } .svc-engineer-mini i { color: var(--gold); margin-top: 2px; flex-shrink: 0; } .sem-name { display: block; color: var(--white); font-weight: 600; font-size: .82rem; } .sem-phone { display: block; color: var(--gold); margin-top: 3px; font-family: var(--font-mono); font-size: .78rem; text-decoration: none; } .sem-phone:hover { text-decoration: underline; } /* ============================================================ HARİTA MÜHENDİSLİĞİ DETAY BÖLÜMÜ ============================================================ */ .harita-section { background: var(--ink); } .harita-cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; } @media (max-width: 900px) { .harita-cards-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 580px) { .harita-cards-grid { grid-template-columns: 1fr; } } .hk-card { background: var(--navy); border: 1px solid var(--border); border-radius: var(--r); padding: 24px 20px; transition: border-color .25s, transform .25s; } .hk-card:hover { border-color: var(--gold); transform: translateY(-4px); } .hk-icon { font-size: 1.4rem; color: var(--gold); margin-bottom: .8rem; } .hk-card h4 { font-family: var(--font-head); font-size: 1.05rem; color: var(--white); margin-bottom: .5rem; } .hk-card p { font-size: .86rem; color: var(--gray); line-height: 1.6; } .harita-slogan { margin: 52px 0 0; text-align: center; font-family: var(--font-head); font-size: 1.3rem; letter-spacing: .04em; color: var(--gold); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; } .hs-dot { color: var(--gray); font-size: 1.1rem; } @media (max-width: 600px) { .harita-slogan { font-size: 1rem; gap: 8px; } } .harita-engineer { margin-top: 40px; padding: 28px; background: var(--navy); border: 1px solid var(--border); border-radius: var(--r); } .he-left { display: flex; gap: 20px; align-items: flex-start; } .he-avatar { width: 56px; height: 56px; border-radius: 50%; background: rgba(200,151,58,.15); border: 1.5px solid var(--gold); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; color: var(--gold); flex-shrink: 0; } .he-role { display: block; font-family: var(--font-mono); font-size: .65rem; color: var(--gold); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 4px; } .he-name { display: block; font-family: var(--font-head); font-size: 1.3rem; color: var(--white); } .he-title { display: block; font-size: .82rem; color: var(--gray); margin-bottom: 8px; } .he-desc { font-size: .85rem; color: var(--gray); line-height: 1.65; margin: 8px 0 12px; } .he-phone { font-family: var(--font-mono); font-size: .82rem; } @media (max-width: 580px) { .he-left { flex-direction: column; } } .harita-note { margin-top: 24px; padding: 14px 20px; background: rgba(200,151,58,.07); border-left: 3px solid var(--gold); border-radius: 4px; font-size: .85rem; color: var(--gray); line-height: 1.65; } .harita-note i { color: var(--gold); margin-right: 8px; } /* Snake scoreboard rekor mobile fix */ @media (max-width: 480px) { .snake-scoreboard { flex-wrap: wrap; gap: 8px; } .snake-stat-wide { flex: 1 1 100%; } .snake-stat { padding: 10px 8px; } .snake-val { font-size: 1.25rem; } } /* Skor tablosu mobilde her zaman görünür */ #snakeLeaderboard { display: flex !important; flex-direction: column; } @media (max-width: 768px) { #snakeLeaderboard { order: 2; /* snake-panel'den sonra gelsin */ width: 100%; max-height: 250px; min-height: 120px; } .snake-panel { order: 1; } .snake-wrapper { gap: 16px; } } /* =================================================== YAP-SAT BÖLÜMÜ =================================================== */ /* ================================================ YAP-SAT — YENİ SPLIT LAYOUT Sol: Fotoğraf (gecefoto), Sağ: Yazılar + Mini Stat Kartları ================================================ */ .yap-sat-section { background: var(--navy-1); } /* Ana iki sütun split */ .ys-split { display: grid; grid-template-columns: 1fr 1.15fr; gap: 3rem; align-items: center; margin-top: 2.5rem; } /* Sol: Fotoğraf bloğu */ .ys-split-photo { position: relative; } .ys-photo-stack { position: relative; border-radius: 16px; overflow: hidden; box-shadow: 0 12px 50px rgba(0,0,0,.55), 0 0 0 1px rgba(200,151,58,0.15); } .ys-photo-main { width: 100%; height: 480px; object-fit: cover; display: block; transition: transform .6s ease; } .ys-photo-stack:hover .ys-photo-main { transform: scale(1.04); } .ys-photo-badge { position: absolute; top: 16px; left: 16px; background: rgba(6,15,30,.75); backdrop-filter: blur(8px); border: 1px solid rgba(200,151,58,.45); border-radius: 8px; padding: .4rem .85rem; display: flex; align-items: center; gap: .45rem; color: var(--gold); font-size: .78rem; font-family: var(--font-mono); } .ys-photo-tag { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(0,0,0,.82)); padding: 2rem 1.2rem .9rem; color: rgba(255,255,255,.75); font-size: .72rem; font-family: var(--font-mono); letter-spacing: .04em; } /* Sağ: İçerik */ .ys-split-info { display: flex; flex-direction: column; gap: 1rem; } .ys-eyebrow { display: inline-block; background: rgba(200,151,58,0.1); border: 1px solid rgba(200,151,58,0.35); border-radius: 6px; padding: .3rem .9rem; font-size: .75rem; color: var(--gold); font-family: var(--font-mono); letter-spacing: .06em; width: fit-content; } .ys-split-title { font-family: var(--font-head); font-size: clamp(1.4rem, 2.8vw, 2rem); color: var(--white); line-height: 1.25; margin: 0; } .ys-split-desc { color: var(--gray); line-height: 1.75; font-size: .95rem; margin: 0; } .ys-split-desc strong { color: var(--white); } /* --- Animasyonlu Mini Stat Kartları --- */ .ys-mini-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; } .ys-mini-card { background: var(--navy-2); border: 1px solid var(--border); border-radius: 10px; padding: .75rem .6rem .65rem; text-align: center; display: flex; flex-direction: column; gap: .15rem; position: relative; overflow: hidden; opacity: 0; transform: translateY(18px); animation: mcFadeIn .45s ease forwards; animation-delay: var(--mc-delay, 0ms); transition: border-color .25s, box-shadow .25s, transform .25s; } .ys-mini-card::before { content:''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(200,151,58,0.06), transparent 60%); opacity: 0; transition: opacity .25s; } .ys-mini-card:hover { border-color: rgba(200,151,58,.5); box-shadow: 0 4px 20px rgba(200,151,58,.18); transform: translateY(-3px); } .ys-mini-card:hover::before { opacity: 1; } .ys-mc-wide { grid-column: span 2; } .ys-mc-val { font-family: var(--font-head); font-size: 1.5rem; color: var(--gold); line-height: 1; letter-spacing: .02em; } .ys-mc-val small { font-size: .65em; opacity: .8; } .ys-mc-lbl { font-size: .6rem; color: var(--gray); font-family: var(--font-mono); letter-spacing: .06em; text-transform: uppercase; } .ys-mc-sub { font-size: .7rem; color: var(--white); font-weight: 600; opacity: .85; } @keyframes mcFadeIn { to { opacity: 1; transform: translateY(0); } } /* Features */ .ys-features { display: flex; flex-direction: column; gap: .45rem; } .ys-feat { color: var(--white); font-size: .88rem; display: flex; align-items: flex-start; gap: .55rem; line-height: 1.5; } .ys-feat i { color: var(--gold); margin-top: .15rem; flex-shrink: 0; font-size: .9rem; } .ys-feat strong { color: var(--gold-2); } /* Butonlar */ .ys-split-btns { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: .4rem; } /* Eski gallery stilleri (geriye dönük uyum) */ .yap-sat-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; margin-top: 40px; } .ys-main-photo { position: relative; border-radius: 12px; overflow: hidden; box-shadow: 0 8px 40px rgba(0,0,0,.4); } .ys-main-photo img { width: 100%; height: 420px; object-fit: cover; display: block; transition: transform .5s ease; } .ys-main-photo:hover img { transform: scale(1.04); } .ys-overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(0,0,0,.7)); padding: 24px 20px 16px; } .ys-label { color: #fff; font-size: .85rem; font-family: var(--font-mono); letter-spacing: .05em; } .ys-info h3 { font-size: 1.5rem; color: var(--white); margin-bottom: 1rem; line-height: 1.4; } .ys-info p { color: var(--gray); margin-bottom: 1.5rem; line-height: 1.7; } /* Responsive */ @media (max-width: 900px) { .ys-split { grid-template-columns: 1fr; gap: 2rem; } .ys-photo-main { height: 280px; } .ys-mini-stats { grid-template-columns: repeat(3, 1fr); } .ys-mc-wide { grid-column: span 1; } .yap-sat-gallery { grid-template-columns: 1fr; } .ys-main-photo img { height: 260px; } } @media (max-width: 560px) { .ys-mini-stats { grid-template-columns: repeat(2, 1fr); } .ys-mc-wide { grid-column: span 2; } } /* =================================================== NAVBAR DROPDOWN — Projeler alt menüsü =================================================== */ .nav-dropdown { position: relative; } .nav-dropdown-toggle { display: flex; align-items: center; gap: 5px; cursor: pointer; } .nav-dd-arrow { font-size: .65rem; transition: transform .25s ease; } .nav-dropdown.open .nav-dd-arrow { transform: rotate(180deg); } .nav-dropdown-menu { position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%); background: var(--navy-3); border: 1px solid var(--border); border-radius: 10px; min-width: 210px; padding: 8px 0; box-shadow: 0 12px 40px rgba(0,0,0,.45); opacity: 0; pointer-events: none; transition: opacity .22s ease, transform .22s ease; transform: translateX(-50%) translateY(6px); z-index: 9999; list-style: none; margin: 0; } .nav-dropdown.open .nav-dropdown-menu { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); } .nav-dropdown-menu li { margin: 0; padding: 0; } .nav-dropdown-menu a { display: flex; align-items: center; gap: 10px; padding: 10px 18px; color: var(--gray); font-size: .85rem; font-weight: 400; white-space: nowrap; transition: background .18s, color .18s, padding-left .18s; border-radius: 0; } .nav-dropdown-menu a i { color: var(--gold); font-size: .8rem; width: 14px; text-align: center; } .nav-dropdown-menu a:hover { background: rgba(200,151,58,.08); color: var(--gold); padding-left: 22px; } /* Küçük ok işareti / üçgen */ .nav-dropdown-menu::before { content: ''; position: absolute; top: -7px; left: 50%; transform: translateX(-50%); border: 7px solid transparent; border-top: none; border-bottom-color: var(--border); } .nav-dropdown-menu::after { content: ''; position: absolute; top: -6px; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top: none; border-bottom-color: var(--navy-3); } /* Mobil dropdown */ @media (max-width: 900px) { .nav-dropdown-menu { position: static; transform: none !important; box-shadow: none; border: none; background: rgba(200,151,58,.05); border-radius: 8px; max-height: 0; overflow: hidden; opacity: 1; pointer-events: none; padding: 0; transition: max-height .3s ease, padding .3s ease; } .nav-dropdown.open .nav-dropdown-menu { max-height: 400px; padding: 6px 0; pointer-events: auto; } .nav-dropdown-menu::before, .nav-dropdown-menu::after { display: none; } .nav-dropdown-menu a { padding: 9px 14px; font-size: .82rem; } } /* =================================================== BİTMİŞ HALİ — Düzeltilmiş Grid =================================================== */ .bitmis-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 40px; } .bitmis-full { grid-column: 1 / -1; /* tam genişlik */ } .bitmis-media-item { position: relative; border-radius: 14px; overflow: hidden; background: var(--navy-1); box-shadow: 0 6px 30px rgba(0,0,0,.4); } .bitmis-img-wrap { width: 100%; height: 300px; overflow: hidden; } .bitmis-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; } .bitmis-media-item:hover .bitmis-img-wrap img { transform: scale(1.04); } .bitmis-video { width: 100%; height: 300px; display: block; background: #000; object-fit: cover; } .bitmis-full .bitmis-video { height: 420px; } .bitmis-caption { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(0,0,0,.72)); color: #fff; padding: 20px 16px 12px; font-size: .82rem; font-family: 'Space Mono', monospace; letter-spacing: .04em; } .bitmis-caption i { color: var(--gold); margin-right: 6px; } @media (max-width: 700px) { .bitmis-grid { grid-template-columns: 1fr; } .bitmis-full { grid-column: 1; } .bitmis-img-wrap, .bitmis-video { height: 220px; } .bitmis-full .bitmis-video { height: 240px; } } /* =================================================== İNŞAAT HALİ — Thumbnail Grid + Modal =================================================== */ .insaat-photo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 30px; } .insaat-item { border-radius: 12px; overflow: hidden; cursor: pointer; aspect-ratio: 4/3; background: var(--navy-2); box-shadow: 0 4px 20px rgba(0,0,0,.35); transition: transform .3s ease, box-shadow .3s ease, outline .2s; position: relative; outline: 2px solid transparent; } .insaat-item:hover { transform: translateY(-5px) scale(1.02); box-shadow: 0 16px 40px rgba(0,0,0,.55); outline: 2px solid rgba(200,151,58,.55); } .insaat-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; } .insaat-item:hover img { transform: scale(1.06); } /* Video thumbnail */ .insaat-video-thumb .insaat-video-cover { position: relative; width: 100%; height: 100%; } .insaat-thumb-vid { width: 100%; height: 100%; object-fit: cover; display: block; } .insaat-play-btn { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.38); transition: background .25s; } .insaat-play-btn i { font-size: 2.4rem; color: #fff; background: var(--gold); width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(200,151,58,.5); transition: transform .25s, box-shadow .25s; } .insaat-video-thumb:hover .insaat-play-btn { background: rgba(0,0,0,.18); } .insaat-video-thumb:hover .insaat-play-btn i { transform: scale(1.12); box-shadow: 0 6px 28px rgba(200,151,58,.7); } @media (max-width: 860px) { .insaat-photo-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .insaat-photo-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } } /* =================================================== YAP-SAT — Foto düzeltme =================================================== */ .ys-main-photo img { width: 100%; height: 440px; object-fit: cover; display: block; transition: transform .5s ease; } /* =================================================== GECEDİŞ HERO CARD (Projeler Bölümü Video Hero) =================================================== */ .gecedis-hero { position: relative; width: 100%; height: 480px; border-radius: 16px; overflow: hidden; margin-bottom: 48px; cursor: pointer; border: 1px solid rgba(200,151,58,.25); box-shadow: 0 20px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(200,151,58,.1); transition: transform .4s ease, box-shadow .4s ease; } .gecedis-hero:hover { transform: translateY(-4px); box-shadow: 0 28px 80px rgba(0,0,0,.7), 0 0 40px rgba(200,151,58,.2); } .gecedis-bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.55); transition: filter .5s; } .gecedis-hero:hover .gecedis-bg-video { filter: brightness(.7); } .gecedis-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(6,15,30,.5) 0%, rgba(200,151,58,.08) 100%); } .gecedis-inner { text-align: center; } .gecedis-play-ring { width: 80px; height: 80px; border: 2px solid rgba(200,151,58,.7); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; font-size: 1.6rem; color: var(--gold); backdrop-filter: blur(8px); background: rgba(200,151,58,.12); transition: transform .3s, background .3s, border-color .3s; animation: ringPulse 2s ease-in-out infinite; } @keyframes ringPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(200,151,58,.4); } 50% { box-shadow: 0 0 0 20px rgba(200,151,58,.0); } } .gecedis-hero:hover .gecedis-play-ring { transform: scale(1.1); background: rgba(200,151,58,.25); border-color: var(--gold); } .gecedis-title { font-family: var(--font-head); font-size: clamp(1.8rem, 4vw, 3rem); color: #fff; letter-spacing: .04em; text-shadow: 0 2px 20px rgba(0,0,0,.5); } .gecedis-sub { font-family: var(--font-mono); font-size: .75rem; color: rgba(200,151,58,.85); margin-top: .5rem; letter-spacing: .1em; text-transform: uppercase; } .gecedis-badge { display: inline-flex; align-items: center; gap: .4rem; margin-top: 1.2rem; padding: 6px 16px; border: 1px solid rgba(200,151,58,.4); border-radius: 20px; font-size: .75rem; color: var(--gold); backdrop-filter: blur(8px); background: rgba(200,151,58,.08); font-family: var(--font-mono); transition: background .3s; } .gecedis-hero:hover .gecedis-badge { background: rgba(200,151,58,.18); } /* =================================================== VIDEO MODAL (Tam Ekran) =================================================== */ .video-modal { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; } .video-modal.open { opacity: 1; visibility: visible; } .vm-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.92); backdrop-filter: blur(12px); } .vm-container { position: relative; z-index: 1; width: min(95vw, 1100px); padding: 16px; transform: scale(.92); transition: transform .35s cubic-bezier(.34,1.56,.64,1); } .video-modal.open .vm-container { transform: scale(1); } .vm-close { position: absolute; top: -44px; right: 0; background: rgba(200,151,58,.15); border: 1px solid rgba(200,151,58,.3); border-radius: 50%; width: 36px; height: 36px; color: var(--gold); font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s, transform .2s; } .vm-close:hover { background: rgba(200,151,58,.35); transform: rotate(90deg); } .vm-inner { position: relative; } .vm-video { width: 100%; border-radius: 12px; box-shadow: 0 0 80px rgba(200,151,58,.15); background: #000; display: block; } .vm-title { text-align: center; margin-top: 12px; font-family: var(--font-mono); font-size: .7rem; color: var(--gold); letter-spacing: .1em; text-transform: uppercase; } /* =================================================== LİGHTBOX (Fotoğraf Görüntüleyici) =================================================== */ .lightbox { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; } .lightbox.open { opacity: 1; visibility: visible; } .lb-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.93); backdrop-filter: blur(16px); } .lb-img-wrap { position: relative; z-index: 1; max-width: 92vw; max-height: 88vh; display: flex; align-items: center; justify-content: center; transform: scale(.9); transition: transform .35s cubic-bezier(.34,1.56,.64,1); } .lightbox.open .lb-img-wrap { transform: scale(1); } .lb-img-wrap img { max-width: 92vw; max-height: 85vh; object-fit: contain; border-radius: 8px; box-shadow: 0 30px 100px rgba(0,0,0,.6); } .lb-close { position: fixed; top: 20px; right: 20px; z-index: 2; background: rgba(200,151,58,.15); border: 1px solid rgba(200,151,58,.3); border-radius: 50%; width: 42px; height: 42px; color: var(--gold); font-size: 1.1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s, transform .2s; } .lb-close:hover { background: rgba(200,151,58,.35); transform: rotate(90deg); } .lb-nav { position: fixed; top: 50%; z-index: 2; transform: translateY(-50%); background: rgba(200,151,58,.12); border: 1px solid rgba(200,151,58,.25); border-radius: 50%; width: 44px; height: 44px; color: var(--gold); font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s; } .lb-nav:hover { background: rgba(200,151,58,.3); } .lb-prev { left: 16px; } .lb-next { right: 16px; } .lb-counter { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 2; font-family: var(--font-mono); font-size: .65rem; color: rgba(200,151,58,.7); letter-spacing: .1em; background: rgba(6,15,30,.6); padding: 4px 14px; border-radius: 20px; } /* =================================================== BİTMİŞ HALİ — Video Hero Kartı =================================================== */ .bitmis-video-hero { border: 1px solid rgba(200,151,58,.25) !important; box-shadow: 0 12px 40px rgba(0,0,0,.5) !important; } .bitmis-video-hero .bitmis-video { border-radius: 12px; } /* =================================================== İNŞAAT HALİ — Yeni Stiller =================================================== */ .insaat-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; } .insaat-item { position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 4/3; background: var(--navy-2); cursor: zoom-in; border: 1px solid rgba(100,160,220,.12); transition: transform .35s ease, box-shadow .35s ease, border-color .35s; animation: fadeInUp .5s both; animation-delay: var(--delay, 0ms); } .insaat-item.insaat-video-item { aspect-ratio: 16/9; cursor: default; grid-column: 1 / -1; } .insaat-item:hover { transform: translateY(-5px) scale(1.01); box-shadow: 0 16px 48px rgba(0,0,0,.5); border-color: rgba(200,151,58,.3); } .insaat-item img, .insaat-vid { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; } .insaat-item:hover img { transform: scale(1.05); } .insaat-label { position: absolute; bottom: 0; left: 0; right: 0; padding: 8px 12px; background: linear-gradient(transparent, rgba(6,15,30,.85)); font-family: var(--font-mono); font-size: .65rem; color: rgba(200,151,58,.85); letter-spacing: .06em; display: flex; align-items: center; gap: .4rem; transform: translateY(100%); transition: transform .3s; } .insaat-item:hover .insaat-label { transform: translateY(0); } /* =================================================== 3D PARTİKÜL CANVAS =================================================== */ .particle-canvas { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .55; } /* =================================================== 3D YAPI ANIMASYONU — Hero'ya Ek =================================================== */ @keyframes float3d { 0%,100% { transform: translateY(0) rotateX(0deg) rotateY(0deg); } 25% { transform: translateY(-12px) rotateX(2deg) rotateY(-2deg); } 75% { transform: translateY(6px) rotateX(-1deg) rotateY(2deg); } } /* =================================================== RESPONSIVE — Yeni Elemanlar =================================================== */ @media (max-width: 768px) { .gecedis-hero { height: 280px; } .gecedis-title { font-size: 1.5rem; } .gecedis-play-ring { width: 56px; height: 56px; font-size: 1.1rem; } .insaat-photo-grid { grid-template-columns: repeat(2, 1fr); } .lb-nav { width: 36px; height: 36px; font-size: .85rem; } } @media (max-width: 480px) { .insaat-photo-grid { grid-template-columns: 1fr; } .gecedis-hero { height: 220px; } } /* =================================================== FADE IN UP ANİMASYON =================================================== */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } /* ============================================================ MOBİL — Yüzen butonlar sağda görünür, küçültülmüş ============================================================ */ @media (max-width: 768px) { .fab-wp, .fab-call, .fab-insta, .fab-fb { width: 48px; height: 48px; font-size: 1.1rem; right: 14px; } .fab-wp { bottom: 80px; } .fab-call { bottom: 18px; } .fab-insta { bottom: 222px; } .fab-fb { bottom: 151px; } .scroll-top { width: 36px; height: 36px; right: 14px; bottom: 298px; font-size: .75rem; opacity: 0; pointer-events: none; } .scroll-top.visible { opacity: 1; pointer-events: auto; } }