Prompt Dokümanı

Mahmutoğlu Hukuk & Danışmanlık

Web Sitesi Tasarım Dokümanı - v1

Tasarım Fingerprint

Bu kombinasyon benzersiz olarak kaydedildi

MH-v1-a7f3

20 Ocak 2026

Sektör ve Tarz Bilgileri

Sektör

Hukuk Bürosu / Avukatlık

Firma

Mahmutoğlu Hukuk & Danışmanlık

Ana Tarz

Lüks / Premium

Alternatif Tarz

Art Deco

Seçilen Stil Etiketleri

Lüks / Premium Art Deco Amber Palette Nefes Alan / Spacious Mega Menu Centered Footer

Design Token Sistemi

Renk Paleti (40 Gradient'ten #7 Navy Professional + Amber)

Primary

amber-500 (#f59e0b)

Secondary

amber-600 (#d97706)

Accent

amber-700 (#b45309)

Background

slate-950 (#020617)

Gradient Ailesi

Primary Gradient

from-amber-500 to-amber-600

Icon/Badge Gradient

from-amber-500 to-amber-700

Subtle Gradient

from-amber-500/20 to-amber-700/10

Font Çifti (50 Çift'ten #41 - Premium Kategorisi)

Heading Font

Cinzel

Klasik, güçlü, hukuki otorite hissi

Body Font

Inter

Modern, okunabilir, profesyonel

Spacing Sistemi

  • Section Padding: py-20 md:py-32
  • Container: px-3 sm:px-6 md:px-8 lg:px-12 xl:px-16 2xl:px-20
  • Card Padding: p-6 md:p-8
  • Gap: gap-6 md:gap-8

Border & Shadow

  • Card Border: rounded-2xl
  • Button Border: rounded-lg
  • Accent Border: border-amber-500/10
  • Hover Border: border-amber-500/30

Layout Seçimleri

Hero Section #113 Dark Luxury

Full-screen image with dark overlay + centered content + Art Deco geometric elements + animated gradient text + stats bar

About Section #21 Split Layout

Sol %60 metin + Sağ %40 animated border image + floating stat card

Why Us Section #61 Card-Based Grid

3-column grid + icon headers + hover border effect + CTA card

Services Section #1 Card Grid 4-column

4-column grid + gradient border cards + icon hover effect

Process Section #26 Numbered Horizontal

5-step horizontal process + numbered circles + arrow connections

Team Section #61 Card-Based

Featured founder card + 3-column team grid

Blog Section #1 Card Grid 4-column

4-column blog cards + image hover zoom + category badges

FAQ Section #7 Accordion Sidebar

Split layout: Sol CTA + Sağ accordion (Alpine.js)

Contact Section #1 Split Form

5-column grid: 2-col info cards + 3-col form + map

Footer #1 Multi-Column + Centered Copyright

4-column footer: Logo/about + Quick links + Services + Contact + centered copyright

Section Sırası

Seçilen Sıralama: #2 İnsan Odaklı (Modifiye)

  1. 1 Hero
  2. 2 About (Hakkımızda)
  3. 3 Why Us (Neden Biz)
  4. 4 Services (8 Hizmet Alanı)
  5. 5 Process (Süreçlerimiz)
  6. 6 Team (Ekibimiz)
  7. 7 Blog (Makaleler)
  8. 8 FAQ (SSS)
  9. 9 Contact (İletişim)
  10. 10 Footer

Mega Menu & Hover Efektleri

Mega Menu Stili

Seçilen: #1 Full-Width Mega (Grid with Icons)

  • • Kurumsal: 3 link dropdown
  • • Hizmetler: 2-column grid (8 hizmet)
  • • Icon hover: fat → fas geçişi
  • • Animated reveal (opacity + translateY)

Hover Efektleri

Seçilenler (20 efektten):

  • #1 Icon weight değişimi (fat → fas)
  • #2 Icon scale (1.1x)
  • #9 Text renk değişimi (title → amber)
  • #14 Gradient border reveal

Hover Kuralı (Kritik!)

✅ Card SABİT kalır - transform/scale/translate YOK
✅ İçerik hareket eder - icon scale, title color change
✅ Border hover - shadow yerine border-color değişimi

Özel Efektler

Animated Gradient Text

Hero ve section başlıklarında kullanıldı

background: linear-gradient(90deg, #f59e0b, #fbbf24, #f59e0b, #d97706);
animation: gradientFlow 6s ease infinite;

Animated Gradient Border

Featured cards ve form container'da

background: linear-gradient(90deg, #f59e0b, #fbbf24, #d97706);
animation: borderFlow 4s ease infinite;

Art Deco Pattern

Background pattern olarak kullanıldı

SVG diamond pattern
fill-opacity: 0.05

Geometric Diamonds

Hero section dekoratif elementler

transform: rotate(45deg);
border: 2px solid rgba(245, 158, 11, 0.3);

Dark/Light Mode

Dark Mode (Varsayılan)

  • • Background: slate-950, slate-900
  • • Text: white, white/80, white/60
  • • Accent: amber-500, amber-400
  • • Border: amber-500/10, amber-500/20

Light Mode

  • • Background: white, slate-50
  • • Text: slate-900, slate-700
  • • Accent: amber-600, amber-500
  • • Border: amber-500/20, slate-200

Toggle butonu header'da mevcut. localStorage ile tercih hatırlanır.

Leonardo.ai Görsel Promptları

hero-bg.jpg 1472x832

Editorial photograph of a prestigious law firm office interior, floor-to-ceiling windows with Istanbul Bosphorus view at golden hour, dark mahogany wood paneling, leather Chesterfield sofas, brass accents and Art Deco geometric patterns, warm ambient lighting, professional atmosphere, Canon EOS R5 24-70mm f/2.8, shallow depth of field, Kodak Portra 400 film look, subtle lens flare, 8k quality, architectural photography style

Model: Leonardo Phoenix Style: Cinematic Preset: Premium Interior
about-office.jpg 800x933

Professional editorial photograph of a modern law firm meeting room, long polished conference table, executive leather chairs, legal books on shelves, city skyline through windows, natural daylight, warm wood tones with gold accents, sophisticated corporate atmosphere, Sony A7R IV 35mm f/1.4, medium depth of field, clean composition, Fuji Velvia color tones, subtle vignette, 8k quality

Model: Leonardo Phoenix Style: Editorial
founder-portrait.jpg 600x600

Professional headshot portrait of a distinguished Turkish male lawyer in his 50s, silver-gray hair, wearing tailored navy blue suit with gold tie, confident but approachable expression, law office background with bookshelves slightly blurred, Rembrandt lighting, Canon EOS R5 85mm f/1.4, shallow depth, warm skin tones, subtle film grain, executive portrait style, 8k quality

Model: Leonardo Phoenix Style: Portrait
team-lawyer-1.jpg 600x600

Professional headshot of a Turkish female lawyer in her 30s, dark brown hair in professional updo, wearing charcoal gray blazer with white blouse, intelligent and confident expression, modern office background, soft studio lighting, Canon EOS R5 85mm f/1.8, shallow depth, natural makeup, corporate portrait style, 8k quality

Model: Leonardo Phoenix Style: Portrait
team-lawyer-2.jpg 600x600

Professional headshot of a Turkish male lawyer in his 40s, short dark hair with slight gray at temples, wearing black suit with burgundy tie, serious but approachable expression, law library background, split lighting, Sony A7R IV 85mm f/1.4, shallow depth, warm skin tones, executive portrait style, 8k quality

Model: Leonardo Phoenix Style: Portrait
team-lawyer-3.jpg 600x600

Professional headshot of a young Turkish male lawyer in his early 30s, clean-shaven, wearing navy blue suit with light blue tie, energetic and determined expression, modern glass office background, natural window light, Canon EOS R5 50mm f/1.2, medium depth, fresh professional look, corporate portrait style, 8k quality

Model: Leonardo Phoenix Style: Portrait
blog-mobbing.jpg 800x450

Editorial photograph of a stressed office worker at desk, subtle shadows, corporate office environment, papers scattered, laptop screen glowing, dramatic side lighting creating tension, conceptual workplace harassment imagery, Canon EOS R5 35mm f/1.8, shallow depth, desaturated color grade with warm highlights, documentary style, 8k quality

Model: Leonardo Phoenix Style: Documentary
blog-traffic.jpg 800x450

Editorial photograph of traffic accident scene aftermath, two cars with minor damage, police lights in background, insurance documents visible, urban street setting, evening blue hour lighting, Canon EOS R5 24mm f/2.8, wide angle, cinematic color grade with orange-teal tones, photojournalism style, 8k quality

Model: Leonardo Phoenix Style: Photojournalism
blog-company.jpg 800x450

Editorial photograph of business meeting in modern boardroom, professionals reviewing documents with company registration papers, laptop showing corporate structure chart, glass table with legal documents, natural daylight, Canon EOS R5 35mm f/2.0, medium depth, warm corporate atmosphere, business photography style, 8k quality

Model: Leonardo Phoenix Style: Corporate
blog-law-update.jpg 800x450

Editorial photograph of Turkish Labor Law book on desk, gavel beside it, reading glasses resting on open pages, warm desk lamp lighting, shallow depth of field focusing on book title, dark wood desk, professional atmosphere, Canon EOS R5 50mm f/1.4, Kodak Portra color tones, still life photography, 8k quality

Model: Leonardo Phoenix Style: Still Life

Teknik Notlar

Kullanılan Teknolojiler

  • • Tailwind CSS v4 (CDN)
  • • Alpine.js (Accordion, interactions)
  • • AOS (Scroll animations)
  • • FontAwesome Pro 7 (Local)
  • • Google Fonts (Cinzel + Inter)

Responsive Breakpoints

  • • sm: 640px
  • • md: 768px
  • • lg: 1024px
  • • xl: 1280px
  • • 2xl: 1536px

Performans Optimizasyonları

  • • Lazy loading images
  • • AOS once: true (tek seferlik animasyon)
  • • GPU-accelerated animations (transform, opacity)
  • • Preconnect for Google Fonts

20 Ocak 2026 • Mahmutoğlu Hukuk & Danışmanlık Tasarım Dokümanı