/* ============================================================ 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:10px 16px; gap:10px; } [data-theme="light"] .mob-bar { background:rgba(240,244,250,.97); } .mob-bar a { flex:1; display:flex; align-items:center; justify-content:center; gap:.5rem; padding:12px; border-radius:4px; font-size:.85rem; font-weight:700; font-family:var(--font-mono); letter-spacing:.04em; } .mob-bar .mc { background:var(--gold); color:var(--navy); } .mob-bar .mw { background:#25D366; color:#fff; } /* ============================================================ 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-wp, .fab-call { display:none; } .scroll-top { display:none; } .theme-toggle { top:auto; bottom:80px; transform:none; } .mob-bar { display:flex; } body { padding-bottom:62px; } .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, .fab-wp, .fab-call, .scroll-top, .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: flex-end; align-items: flex-start; } .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; } /* SNAKE RESPONSIVE */ @media (max-width: 768px) { .snake-wrapper { justify-content: center; } .snake-panel { max-width: 100%; padding: 16px 12px; } .snake-val { font-size: 1.4rem; } .dpad-btn { width: 38px; height: 38px; } } .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: center; gap: 1.2rem; padding: 24px; 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; justify-content: flex-start; padding-top: 24px; overflow-y: auto; } .death-overlay .death-img { height: 42vh; max-width: 92vw; border-width: 2px; } .death-overlay .death-title { font-size: clamp(2rem, 9vw, 3rem); } .death-overlay .death-score { font-size: .85rem; text-align: center; padding: 0 8px; } .death-overlay .death-actions { gap: .5rem; width: 100%; } .death-overlay .death-actions .btn { min-width: 130px; padding: 11px 16px; font-size: .8rem; flex: 1; max-width: 180px; } .death-overlay .death-form { width: 100%; max-width: 320px; padding: 12px 14px; } .death-overlay .death-form input { min-width: 0; width: 100%; font-size: .95rem; } } /* Çok küçük ekranlarda (örn. eski telefon) ek küçültme */ @media (max-width: 360px) { .death-overlay .death-img { height: 38vh; } .death-overlay .death-title { font-size: 1.8rem; } } /* ===== 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 { color: rgba(138,155,181,.4) !important; font-size: .72rem !important; font-family: var(--font-mono) !important; width: 100%; text-align: center; margin-top: .3rem; } .footer-zk { color: var(--gold); font-weight: 700; letter-spacing: .05em; } /* ============================================================ 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); } /* Hide on mobile (mob-bar handles it) */ @media (max-width: 768px) { .fab-insta, .fab-fb { display: none; } } /* ============================================================ 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); }