<?php
/* =========================================================
   LİDER SEZER STONE
   TEK DOSYALI KURUMSAL WEB SİTESİ
   Dosya adı: index.php

   Sayfalar:
   ?sayfa=anasayfa
   ?sayfa=kurumsal
   ?sayfa=mermer
   ?sayfa=granit
   ?sayfa=dogal-tas
   ?sayfa=hizmetler
   ?sayfa=projeler
   ?sayfa=iletisim
   ?sayfa=teklif

   Google Ads Landing:
   ?sayfa=mermer-uygulama
   ?sayfa=granit-uygulama
========================================================= */

$page = isset($_GET['sayfa']) ? strtolower(trim($_GET['sayfa'])) : 'anasayfa';

$allowed = [
    'anasayfa',
    'kurumsal',
    'mermer',
    'granit',
    'dogal-tas',
    'hizmetler',
    'projeler',
    'iletisim',
    'teklif',
    'mermer-uygulama',
    'granit-uygulama'
];

if (!in_array($page, $allowed)) {
    $page = 'anasayfa';
}

$company = "Lider Sezer Stone";
$phoneDisplay = "0537 721 57 51";
$phoneRaw = "905537215751";
$whatsapp = "https://wa.me/".$phoneRaw;
$address = "Alibeyköy, Atatürk Cd. No:159/1, Eyüpsultan / İstanbul";
$domain = "https://lidersezerstone.com";

/* =========================================================
   SEO VERİLERİ
========================================================= */

$seo = [

'anasayfa' => [
'title' => 'Lider Sezer Stone | Mermer, Granit ve Doğal Taş İstanbul',
'description' => 'İstanbul Eyüpsultan’da mermer, granit ve doğal taş çözümleri. Mimari projeler, özel ölçü uygulamalar ve profesyonel taş çözümleri için Lider Sezer Stone.',
'h1' => 'Taşı Mimariye Dönüştürüyoruz.',
'eyebrow' => 'MERмер • GRANİT • DOĞAL TAŞ'
],

'kurumsal' => [
'title' => 'Kurumsal | Lider Sezer Stone İstanbul',
'description' => 'Lider Sezer Stone kurumsal yaklaşımı, doğal taş anlayışı ve proje odaklı çalışma prensipleri.',
'h1' => 'Doğanın Gücünü Mimariye Taşıyoruz.',
'eyebrow' => 'LİDER SEZER STONE'
],

'mermer' => [
'title' => 'Mermer İstanbul | Mermer Uygulama ve Proje | Lider Sezer Stone',
'description' => 'İstanbul mermer uygulamaları, mermer basamak, mermer zemin, duvar kaplama, tezgah ve mimari doğal taş çözümleri.',
'h1' => 'Mermerin Zamansız Zarafeti.',
'eyebrow' => 'MERMER'
],

'granit' => [
'title' => 'Granit İstanbul | Granit Uygulama | Lider Sezer Stone',
'description' => 'İstanbul granit uygulamaları. Dayanıklı granit yüzeyler, zemin, merdiven, tezgah ve mimari proje çözümleri.',
'h1' => 'Gücün ve Dayanıklılığın Doğal Hali.',
'eyebrow' => 'GRANİT'
],

'dogal-tas' => [
'title' => 'Doğal Taş İstanbul | Lider Sezer Stone',
'description' => 'İç ve dış mimari projeler için doğal taş çözümleri. Mermer, granit ve seçkin taş uygulamaları.',
'h1' => 'Her Taşın Bir Karakteri Vardır.',
'eyebrow' => 'DOĞAL TAŞ'
],

'hizmetler' => [
'title' => 'Mermer ve Granit Hizmetleri | Lider Sezer Stone',
'description' => 'Ölçülendirme, proje değerlendirme, doğal taş seçimi, kesim ve uygulama süreçleri için Lider Sezer Stone.',
'h1' => 'Projeden Uygulamaya Tek Nokta.',
'eyebrow' => 'HİZMETLER'
],

'projeler' => [
'title' => 'Projeler | Mermer ve Granit Uygulamaları | Lider Sezer Stone',
'description' => 'Mermer, granit ve doğal taş ile gerçekleştirilen mimari uygulamalardan seçkiler.',
'h1' => 'Taşın Mekânla Buluştuğu Nokta.',
'eyebrow' => 'PROJELER'
],

'iletisim' => [
'title' => 'İletişim | Lider Sezer Stone Eyüpsultan İstanbul',
'description' => 'Lider Sezer Stone iletişim, telefon, WhatsApp, adres ve yol tarifi bilgileri.',
'h1' => 'Projenizi Birlikte Konuşalım.',
'eyebrow' => 'İLETİŞİM'
],

'teklif' => [
'title' => 'Mermer Granit Fiyat Teklifi | Lider Sezer Stone',
'description' => 'Mermer, granit ve doğal taş projeniz için hızlı teklif talebi oluşturun.',
'h1' => 'Projenize Özel Teklif Alın.',
'eyebrow' => 'TEKLİF AL'
],

'mermer-uygulama' => [
'title' => 'İstanbul Mermer Uygulama Firması | Lider Sezer Stone',
'description' => 'İstanbul’da mermer uygulama, mermer zemin, merdiven, tezgah ve duvar kaplama projeleri için teklif alın.',
'h1' => 'İstanbul Mermer Uygulama Çözümleri.',
'eyebrow' => 'GOOGLE ADS • MERMER'
],

'granit-uygulama' => [
'title' => 'İstanbul Granit Uygulama Firması | Lider Sezer Stone',
'description' => 'İstanbul granit uygulama, granit tezgah, basamak, zemin ve proje çözümleri için Lider Sezer Stone.',
'h1' => 'İstanbul Granit Uygulama Çözümleri.',
'eyebrow' => 'GOOGLE ADS • GRANİT'
]

];

$current = $seo[$page];

$canonical = $page === 'anasayfa'
    ? $domain
    : $domain . '/?sayfa=' . urlencode($page);

function active($name, $page){
    return $name === $page ? 'active' : '';
}

function image($url, $alt = ''){
    return '<img src="'.htmlspecialchars($url).'" alt="'.htmlspecialchars($alt).'" loading="lazy">';
}

?>
<!doctype html>
<html lang="tr">
<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

<title><?= htmlspecialchars($current['title']); ?></title>

<meta name="description" content="<?= htmlspecialchars($current['description']); ?>">
<meta name="keywords" content="mermer istanbul, granit istanbul, doğal taş istanbul, mermer eyüpsultan, granit eyüpsultan, mermer uygulama, granit uygulama, doğal taş uygulama, lider sezer stone">
<meta name="robots" content="index, follow, max-image-preview:large">

<link rel="canonical" href="<?= htmlspecialchars($canonical); ?>">

<meta property="og:type" content="website">
<meta property="og:locale" content="tr_TR">
<meta property="og:title" content="<?= htmlspecialchars($current['title']); ?>">
<meta property="og:description" content="<?= htmlspecialchars($current['description']); ?>">
<meta property="og:url" content="<?= htmlspecialchars($canonical); ?>">
<meta property="og:site_name" content="Lider Sezer Stone">

<meta name="theme-color" content="#12110f">

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;1,500&display=swap" rel="stylesheet">

<script type="application/ld+json">
{
 "@context": "https://schema.org",
 "@type": "HomeAndConstructionBusiness",
 "name": "Lider Sezer Stone Mermer Granit",
 "url": "https://lidersezerstone.com",
 "telephone": "+90 537 721 57 51",
 "address": {
   "@type": "PostalAddress",
   "streetAddress": "Atatürk Cd. No:159/1, Alibeyköy",
   "addressLocality": "Eyüpsultan",
   "addressRegion": "İstanbul",
   "addressCountry": "TR"
 },
 "areaServed": {
   "@type": "City",
   "name": "İstanbul"
 },
 "description": "Mermer, granit ve doğal taş uygulama çözümleri."
}
</script>

<style>

/* =========================================================
   RESET
========================================================= */

*{
    box-sizing:border-box;
    margin:0;
    padding:0;
}

html{
    scroll-behavior:smooth;
}

body{
    background:#f3f0e9;
    color:#171612;
    font-family:'DM Sans',sans-serif;
    overflow-x:hidden;
}

img{
    width:100%;
    display:block;
}

a{
    text-decoration:none;
    color:inherit;
}

button,
input,
textarea,
select{
    font:inherit;
}

::selection{
    background:#b9945c;
    color:white;
}

/* =========================================================
   COLORS
========================================================= */

:root{
    --black:#11110f;
    --black2:#1a1916;
    --cream:#f3f0e9;
    --cream2:#e8e2d8;
    --gold:#b49361;
    --gold2:#d5b77e;
    --white:#fff;
    --gray:#77746e;
    --line:rgba(20,20,18,.12);
}

/* =========================================================
   GLOBAL
========================================================= */

.container{
    width:min(1380px,calc(100% - 64px));
    margin:auto;
}

.section{
    padding:120px 0;
}

.eyebrow{
    font-size:12px;
    font-weight:700;
    letter-spacing:4px;
    text-transform:uppercase;
    color:var(--gold);
    margin-bottom:22px;
}

.display{
    font-family:'Playfair Display',serif;
    font-weight:500;
    font-size:clamp(48px,7vw,106px);
    line-height:.92;
    letter-spacing:-4px;
}

.section-title{
    font-family:'Playfair Display',serif;
    font-weight:500;
    font-size:clamp(40px,5vw,74px);
    line-height:1;
    letter-spacing:-2px;
}

.lead{
    color:#77746e;
    font-size:18px;
    line-height:1.8;
    max-width:680px;
}

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    min-height:58px;
    padding:0 28px;
    border:1px solid transparent;
    font-weight:700;
    font-size:13px;
    letter-spacing:1px;
    text-transform:uppercase;
    transition:.3s;
    cursor:pointer;
}

.btn-dark{
    background:var(--black);
    color:white;
}

.btn-dark:hover{
    background:var(--gold);
}

.btn-gold{
    background:var(--gold);
    color:white;
}

.btn-gold:hover{
    background:#9c7a4a;
}

.btn-line{
    border-color:rgba(255,255,255,.3);
    color:white;
}

.btn-line:hover{
    background:white;
    color:var(--black);
}

/* =========================================================
   HEADER
========================================================= */

.header{
    height:90px;
    background:rgba(17,17,15,.94);
    backdrop-filter:blur(18px);
    position:sticky;
    top:0;
    z-index:1000;
    color:white;
}

.header-inner{
    height:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
}

.logo{
    display:flex;
    align-items:center;
    gap:15px;
}

.logo-mark{
    width:43px;
    height:43px;
    border:1px solid rgba(255,255,255,.35);
    display:grid;
    place-items:center;
    transform:rotate(45deg);
}

.logo-mark span{
    transform:rotate(-45deg);
    font-family:'Playfair Display',serif;
    font-size:19px;
    color:var(--gold2);
}

.logo-text strong{
    font-family:'Manrope',sans-serif;
    font-size:17px;
    letter-spacing:1px;
    display:block;
}

.logo-text small{
    font-size:9px;
    letter-spacing:3.4px;
    color:#aaa69e;
}

.nav{
    display:flex;
    align-items:center;
    gap:26px;
}

.nav > a{
    font-size:12px;
    font-weight:600;
    color:#c9c5bc;
    transition:.3s;
}

.nav > a:hover,
.nav > a.active{
    color:var(--gold2);
}

.header-actions{
    display:flex;
    align-items:center;
    gap:12px;
}

.phone{
    font-size:12px;
    color:#dbd7cf;
}

.menu-btn{
    display:none;
    width:50px;
    height:50px;
    border:1px solid rgba(255,255,255,.2);
    background:none;
    color:white;
    cursor:pointer;
}

/* =========================================================
   HERO
========================================================= */

.hero{
    min-height:calc(100vh - 90px);
    position:relative;
    display:flex;
    align-items:flex-end;
    background:
    linear-gradient(90deg,rgba(10,10,9,.92) 0%,rgba(10,10,9,.55) 45%,rgba(10,10,9,.15) 100%),
    url('https://images.unsplash.com/photo-1600566753086-00f18fb6b3ea?auto=format&fit=crop&w=2200&q=90')
    center/cover;
    color:white;
}

.hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(to bottom,transparent 60%,rgba(10,10,9,.75)),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent calc(25% - 1px),
            rgba(255,255,255,.08) 25%
        );
    pointer-events:none;
}

.hero-content{
    position:relative;
    z-index:2;
    padding:120px 0 85px;
    width:100%;
}

.hero .display{
    max-width:1050px;
}

.hero-description{
    margin-top:34px;
    font-size:17px;
    line-height:1.8;
    max-width:610px;
    color:#d0cec9;
}

.hero-buttons{
    margin-top:38px;
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}

.hero-bottom{
    margin-top:90px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    border-top:1px solid rgba(255,255,255,.2);
}

.hero-stat{
    padding:28px 20px 5px 0;
}

.hero-stat strong{
    display:block;
    font-family:'Playfair Display',serif;
    font-size:26px;
    color:var(--gold2);
}

.hero-stat span{
    color:#aaa7a0;
    font-size:12px;
}

/* =========================================================
   INTRO
========================================================= */

.intro-grid{
    display:grid;
    grid-template-columns:.85fr 1.15fr;
    gap:100px;
    align-items:start;
}

.intro-copy p{
    margin-top:35px;
}

.big-word{
    font-family:'Playfair Display',serif;
    font-size:clamp(80px,15vw,230px);
    line-height:.7;
    color:rgba(17,17,15,.05);
    white-space:nowrap;
    margin-top:50px;
}

/* =========================================================
   CATEGORY CARDS
========================================================= */

.category-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
}

.category-card{
    height:640px;
    position:relative;
    overflow:hidden;
    background:#111;
}

.category-card img{
    height:100%;
    object-fit:cover;
    transition:transform .8s cubic-bezier(.2,.7,.2,1);
}

.category-card:hover img{
    transform:scale(1.06);
}

.category-card::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(to top,rgba(0,0,0,.84),transparent 65%);
}

.category-content{
    position:absolute;
    z-index:3;
    left:34px;
    right:34px;
    bottom:34px;
    color:white;
}

.category-no{
    color:var(--gold2);
    font-size:11px;
    letter-spacing:2px;
}

.category-content h3{
    font-family:'Playfair Display',serif;
    font-size:44px;
    margin:12px 0;
}

.category-content p{
    color:#c3c0ba;
    line-height:1.6;
    font-size:14px;
}

/* =========================================================
   BLACK SECTION
========================================================= */

.dark{
    background:var(--black);
    color:white;
}

.dark .lead{
    color:#aaa69e;
}

.dark-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:90px;
    align-items:center;
}

.image-stack{
    position:relative;
    min-height:650px;
}

.image-stack .img-a{
    position:absolute;
    width:78%;
    height:540px;
    left:0;
    top:0;
    object-fit:cover;
}

.image-stack .img-b{
    position:absolute;
    width:48%;
    height:330px;
    right:0;
    bottom:0;
    object-fit:cover;
    border:12px solid var(--black);
}

/* =========================================================
   SERVICE LIST
========================================================= */

.service-list{
    margin-top:50px;
}

.service{
    padding:30px 0;
    border-top:1px solid rgba(255,255,255,.15);
    display:grid;
    grid-template-columns:70px 1fr auto;
    gap:20px;
    align-items:center;
    transition:.3s;
}

.service:hover{
    padding-left:12px;
}

.service:last-child{
    border-bottom:1px solid rgba(255,255,255,.15);
}

.service-num{
    color:var(--gold);
    font-size:12px;
}

.service h3{
    font-family:'Playfair Display',serif;
    font-size:30px;
    font-weight:500;
}

.service span:last-child{
    font-size:24px;
    color:var(--gold);
}

/* =========================================================
   PROJECTS
========================================================= */

.projects{
    display:grid;
    grid-template-columns:1.2fr .8fr;
    gap:18px;
}

.project-column{
    display:grid;
    gap:18px;
}

.project{
    position:relative;
    overflow:hidden;
    min-height:410px;
}

.project.large{
    min-height:838px;
}

.project img{
    position:absolute;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .7s;
}

.project:hover img{
    transform:scale(1.04);
}

.project::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(to top,rgba(0,0,0,.75),transparent 55%);
}

.project-info{
    position:absolute;
    z-index:3;
    bottom:28px;
    left:28px;
    color:white;
}

.project-info small{
    color:var(--gold2);
    text-transform:uppercase;
    letter-spacing:2px;
}

.project-info h3{
    margin-top:8px;
    font-family:'Playfair Display',serif;
    font-size:31px;
}

/* =========================================================
   MARBLE BAND
========================================================= */

.stone-band{
    padding:160px 0;
    background:
    linear-gradient(rgba(15,15,13,.65),rgba(15,15,13,.65)),
    url('https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?auto=format&fit=crop&w=2200&q=90')
    center/cover fixed;
    color:white;
    text-align:center;
}

.stone-band .section-title{
    max-width:900px;
    margin:auto;
}

.stone-band p{
    margin:25px auto 35px;
    color:#ddd;
    max-width:650px;
}

/* =========================================================
   PAGE HERO
========================================================= */

.page-hero{
    min-height:580px;
    background:
        linear-gradient(90deg,rgba(10,10,9,.92),rgba(10,10,9,.3)),
        url('https://images.unsplash.com/photo-1618221195710-dd6b41faaea6?auto=format&fit=crop&w=2200&q=90')
        center/cover;
    color:white;
    display:flex;
    align-items:flex-end;
}

.page-hero-inner{
    padding:100px 0 75px;
}

.page-hero .display{
    max-width:1000px;
}

/* =========================================================
   CONTENT PAGE
========================================================= */

.content-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
    align-items:center;
}

.content-img{
    min-height:660px;
    object-fit:cover;
}

.checks{
    margin-top:35px;
    display:grid;
    gap:0;
}

.check{
    padding:18px 0;
    border-bottom:1px solid var(--line);
    display:flex;
    gap:16px;
    align-items:flex-start;
}

.check b{
    color:var(--gold);
}

.check span{
    color:#64615c;
    line-height:1.6;
}

/* =========================================================
   CARDS
========================================================= */

.info-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}

.info-card{
    background:white;
    padding:44px 36px;
    min-height:280px;
    border:1px solid var(--line);
}

.info-card .number{
    color:var(--gold);
    font-size:12px;
    letter-spacing:2px;
}

.info-card h3{
    font-family:'Playfair Display',serif;
    font-size:28px;
    margin:45px 0 18px;
}

.info-card p{
    color:#75716b;
    line-height:1.7;
    font-size:14px;
}

/* =========================================================
   CONTACT
========================================================= */

.contact-grid{
    display:grid;
    grid-template-columns:.8fr 1.2fr;
    gap:80px;
}

.contact-data{
    display:grid;
    gap:35px;
    margin-top:45px;
}

.contact-item{
    border-top:1px solid var(--line);
    padding-top:25px;
}

.contact-item small{
    display:block;
    color:#99948b;
    font-size:11px;
    letter-spacing:2px;
    margin-bottom:8px;
}

.contact-item strong{
    font-family:'Playfair Display',serif;
    font-size:24px;
    font-weight:500;
}

.form-box{
    background:white;
    padding:50px;
}

.form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
}

.field{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.field.full{
    grid-column:1/-1;
}

.field label{
    font-size:11px;
    letter-spacing:1px;
    color:#777;
    font-weight:700;
    text-transform:uppercase;
}

.field input,
.field textarea,
.field select{
    border:1px solid #dedad2;
    background:#faf9f6;
    min-height:56px;
    padding:14px;
    outline:none;
}

.field textarea{
    min-height:140px;
    resize:vertical;
}

.field input:focus,
.field textarea:focus,
.field select:focus{
    border-color:var(--gold);
}

.map{
    width:100%;
    height:520px;
    border:0;
    display:block;
}

/* =========================================================
   FAQ
========================================================= */

.faq{
    max-width:900px;
    margin:50px auto 0;
}

.faq-item{
    border-top:1px solid var(--line);
}

.faq-item:last-child{
    border-bottom:1px solid var(--line);
}

.faq-btn{
    width:100%;
    border:0;
    background:none;
    padding:25px 0;
    display:flex;
    justify-content:space-between;
    gap:20px;
    text-align:left;
    cursor:pointer;
    font-weight:700;
    font-size:16px;
}

.faq-content{
    display:none;
    padding:0 0 26px;
    color:#77736c;
    line-height:1.8;
}

.faq-item.open .faq-content{
    display:block;
}

/* =========================================================
   CTA
========================================================= */

.cta{
    background:var(--gold);
    color:white;
}

.cta-inner{
    min-height:330px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:50px;
}

.cta h2{
    font-family:'Playfair Display',serif;
    font-size:clamp(45px,5vw,80px);
    font-weight:500;
    line-height:1;
    max-width:800px;
}

/* =========================================================
   FOOTER
========================================================= */

.footer{
    background:#0d0d0c;
    color:white;
    padding:85px 0 35px;
}

.footer-grid{
    display:grid;
    grid-template-columns:1.5fr .7fr .7fr 1fr;
    gap:60px;
}

.footer-about p{
    color:#88857f;
    line-height:1.7;
    font-size:14px;
    max-width:390px;
    margin-top:25px;
}

.footer h4{
    font-size:11px;
    letter-spacing:2px;
    color:var(--gold2);
    margin-bottom:22px;
}

.footer-links{
    display:grid;
    gap:12px;
}

.footer-links a{
    color:#a9a69f;
    font-size:13px;
}

.footer-links a:hover{
    color:white;
}

.copyright{
    margin-top:70px;
    padding-top:28px;
    border-top:1px solid rgba(255,255,255,.1);
    display:flex;
    justify-content:space-between;
    gap:20px;
    color:#6e6b66;
    font-size:11px;
}

/* =========================================================
   WHATSAPP
========================================================= */

.whatsapp{
    position:fixed;
    right:22px;
    bottom:22px;
    z-index:950;
    width:64px;
    height:64px;
    border-radius:50%;
    background:#1fbe5c;
    color:white;
    display:grid;
    place-items:center;
    box-shadow:0 15px 45px rgba(0,0,0,.28);
    font-size:27px;
}

/* =========================================================
   MOBILE
========================================================= */

@media(max-width:1050px){

    .container{
        width:min(100% - 34px,1380px);
    }

    .nav,
    .header-actions .phone,
    .header-actions .btn{
        display:none;
    }

    .menu-btn{
        display:block;
    }

    .nav.mobile-open{
        display:flex;
        position:fixed;
        left:0;
        right:0;
        top:90px;
        bottom:0;
        background:#11110f;
        flex-direction:column;
        align-items:flex-start;
        padding:45px 25px;
        gap:0;
        overflow:auto;
    }

    .nav.mobile-open a{
        width:100%;
        font-family:'Playfair Display',serif;
        font-size:29px;
        padding:16px 0;
        border-bottom:1px solid rgba(255,255,255,.1);
    }

    .hero{
        min-height:760px;
    }

    .hero-content{
        padding-top:100px;
    }

    .intro-grid,
    .dark-grid,
    .content-grid,
    .contact-grid{
        grid-template-columns:1fr;
        gap:50px;
    }

    .category-grid{
        grid-template-columns:1fr;
    }

    .category-card{
        height:520px;
    }

    .projects{
        grid-template-columns:1fr;
    }

    .project.large{
        min-height:620px;
    }

    .info-grid{
        grid-template-columns:1fr 1fr;
    }

    .footer-grid{
        grid-template-columns:1fr 1fr;
    }

}

@media(max-width:650px){

    .section{
        padding:80px 0;
    }

    .container{
        width:calc(100% - 28px);
    }

    .display{
        letter-spacing:-2px;
    }

    .logo-text strong{
        font-size:15px;
    }

    .hero{
        min-height:720px;
        background-position:60% center;
    }

    .hero-content{
        padding-bottom:50px;
    }

    .hero-bottom{
        margin-top:55px;
        grid-template-columns:1fr;
    }

    .hero-stat{
        border-bottom:1px solid rgba(255,255,255,.1);
        padding:14px 0;
    }

    .big-word{
        display:none;
    }

    .category-card{
        height:480px;
    }

    .category-content{
        left:22px;
        right:22px;
        bottom:22px;
    }

    .image-stack{
        min-height:480px;
    }

    .image-stack .img-a{
        width:85%;
        height:390px;
    }

    .image-stack .img-b{
        width:55%;
        height:235px;
    }

    .service{
        grid-template-columns:35px 1fr auto;
    }

    .service h3{
        font-size:23px;
    }

    .info-grid{
        grid-template-columns:1fr;
    }

    .form-grid{
        grid-template-columns:1fr;
    }

    .form-box{
        padding:28px 20px;
    }

    .field.full{
        grid-column:auto;
    }

    .cta-inner{
        padding:60px 0;
        flex-direction:column;
        align-items:flex-start;
    }

    .footer-grid{
        grid-template-columns:1fr;
    }

    .copyright{
        flex-direction:column;
    }

    .map{
        height:420px;
    }

}

</style>
</head>

<body>

<header class="header">
<div class="container header-inner">

<a class="logo" href="?sayfa=anasayfa">
    <div class="logo-mark"><span>LS</span></div>
    <div class="logo-text">
        <strong>LİDER SEZER STONE</strong>
        <small>MARBLE & NATURAL STONE</small>
    </div>
</a>

<nav class="nav" id="mainNav">
    <a class="<?=active('anasayfa',$page)?>" href="?sayfa=anasayfa">Ana Sayfa</a>
    <a class="<?=active('kurumsal',$page)?>" href="?sayfa=kurumsal">Kurumsal</a>
    <a class="<?=active('mermer',$page)?>" href="?sayfa=mermer">Mermer</a>
    <a class="<?=active('granit',$page)?>" href="?sayfa=granit">Granit</a>
    <a class="<?=active('dogal-tas',$page)?>" href="?sayfa=dogal-tas">Doğal Taş</a>
    <a class="<?=active('hizmetler',$page)?>" href="?sayfa=hizmetler">Hizmetler</a>
    <a class="<?=active('projeler',$page)?>" href="?sayfa=projeler">Projeler</a>
    <a class="<?=active('iletisim',$page)?>" href="?sayfa=iletisim">İletişim</a>
</nav>

<div class="header-actions">
    <a class="phone" href="tel:+<?=$phoneRaw?>"><?=$phoneDisplay?></a>
    <a class="btn btn-gold" href="?sayfa=teklif">Teklif Al</a>
    <button class="menu-btn" id="menuBtn" aria-label="Menü">☰</button>
</div>

</div>
</header>

<?php if($page === 'anasayfa'): ?>

<section class="hero">
<div class="container hero-content">

<div class="eyebrow">LİDER SEZER STONE • İSTANBUL</div>

<h1 class="display">
Taşı Mimariye<br>
Dönüştürüyoruz.
</h1>

<p class="hero-description">
Mermer, granit ve doğal taşın zamansız karakterini modern mimari,
usta işçilik ve proje odaklı çözümlerle buluşturuyoruz.
</p>

<div class="hero-buttons">
<a class="btn btn-gold" href="?sayfa=projeler">Projeleri Keşfet →</a>
<a class="btn btn-line" href="<?=$whatsapp?>" target="_blank">WhatsApp</a>
</div>

<div class="hero-bottom">

<div class="hero-stat">
<strong>Mermer</strong>
<span>Doğal, karakterli ve zamansız yüzeyler</span>
</div>

<div class="hero-stat">
<strong>Granit</strong>
<span>Güçlü ve dayanıklı mimari çözümler</span>
</div>

<div class="hero-stat">
<strong>İstanbul</strong>
<span>Eyüpsultan merkezli proje hizmeti</span>
</div>

</div>
</div>
</section>

<section class="section">
<div class="container intro-grid">

<div>
<div class="eyebrow">DOĞANIN MİMARİYLE BULUŞMASI</div>
<h2 class="section-title">Her yüzey,<br>benzersiz bir imza.</h2>
</div>

<div class="intro-copy">
<p class="lead">
Doğal taş yalnızca bir yapı malzemesi değildir.
Rengi, damarı, dokusu ve ışıkla kurduğu ilişki mekânın bütün
karakterini belirler. Lider Sezer Stone olarak amacımız yalnızca
taş uygulamak değil; doğru taşı doğru projeyle buluşturmaktır.
</p>

<div style="margin-top:32px">
<a class="btn btn-dark" href="?sayfa=kurumsal">Bizi Tanıyın →</a>
</div>
</div>

</div>

<div class="big-word">STONE</div>
</section>

<section class="section" style="padding-top:20px">
<div class="container">

<div class="category-grid">

<a href="?sayfa=mermer" class="category-card">
<img src="https://images.unsplash.com/photo-1600210492486-724fe5c67fb0?auto=format&fit=crop&w=1000&q=85" alt="Mermer uygulamaları">
<div class="category-content">
<span class="category-no">01 — DOĞAL</span>
<h3>Mermer</h3>
<p>Mekânlara zamansız, rafine ve prestijli bir karakter kazandıran doğal yüzeyler.</p>
</div>
</a>

<a href="?sayfa=granit" class="category-card">
<img src="https://images.unsplash.com/photo-1600573472592-401b489a3cdc?auto=format&fit=crop&w=1000&q=85" alt="Granit uygulamaları">
<div class="category-content">
<span class="category-no">02 — GÜÇLÜ</span>
<h3>Granit</h3>
<p>Yoğun kullanıma uygun, güçlü ve uzun ömürlü yüzey çözümleri.</p>
</div>
</a>

<a href="?sayfa=dogal-tas" class="category-card">
<img src="https://images.unsplash.com/photo-1600607687920-4e2a09cf159d?auto=format&fit=crop&w=1000&q=85" alt="Doğal taş">
<div class="category-content">
<span class="category-no">03 — ÖZGÜN</span>
<h3>Doğal Taş</h3>
<p>Doğanın milyonlarca yılda oluşturduğu eşsiz desenleri projelerinize taşıyoruz.</p>
</div>
</a>

</div>
</div>
</section>

<section class="section dark">
<div class="container dark-grid">

<div class="image-stack">
<img class="img-a"
src="https://images.unsplash.com/photo-1600566753190-17f0baa2a6c3?auto=format&fit=crop&w=1100&q=85"
alt="Doğal taş iç mekan">

<img class="img-b"
src="https://images.unsplash.com/photo-1600607688969-a5bfcd646154?auto=format&fit=crop&w=700&q=85"
alt="Mermer detay">
</div>

<div>
<div class="eyebrow">PROJE ODAKLI YAKLAŞIM</div>

<h2 class="section-title">
Doğru taş.<br>
Doğru detay.<br>
Doğru uygulama.
</h2>

<p class="lead" style="margin-top:30px">
Konutlardan ticari projelere, iç mekândan dış cepheye kadar doğal
taş gerektiren uygulamalarda proje ihtiyaçlarına göre çözüm geliştiriyoruz.
</p>

<div class="service-list">

<a class="service" href="?sayfa=hizmetler">
<span class="service-num">01</span>
<h3>Proje Değerlendirme</h3>
<span>↗</span>
</a>

<a class="service" href="?sayfa=hizmetler">
<span class="service-num">02</span>
<h3>Ölçülendirme</h3>
<span>↗</span>
</a>

<a class="service" href="?sayfa=hizmetler">
<span class="service-num">03</span>
<h3>Taş Seçimi</h3>
<span>↗</span>
</a>

<a class="service" href="?sayfa=hizmetler">
<span class="service-num">04</span>
<h3>Uygulama</h3>
<span>↗</span>
</a>

</div>
</div>
</div>
</section>

<section class="section">
<div class="container">

<div style="display:flex;justify-content:space-between;gap:40px;align-items:end;margin-bottom:55px;flex-wrap:wrap">
<div>
<div class="eyebrow">SEÇİLİ UYGULAMALAR</div>
<h2 class="section-title">Projeler.</h2>
</div>

<a class="btn btn-dark" href="?sayfa=projeler">Tüm Projeler →</a>
</div>

<div class="projects">

<div class="project large">
<img src="https://images.unsplash.com/photo-1600210492486-724fe5c67fb0?auto=format&fit=crop&w=1300&q=85" alt="Mermer iç mekan projesi">
<div class="project-info">
<small>İÇ MEKÂN</small>
<h3>Modern Doğal Taş Yüzey</h3>
</div>
</div>

<div class="project-column">

<div class="project">
<img src="https://images.unsplash.com/photo-1600607688969-a5bfcd646154?auto=format&fit=crop&w=1000&q=85" alt="Mermer mutfak">
<div class="project-info">
<small>ÖZEL UYGULAMA</small>
<h3>Mermer Yüzey</h3>
</div>
</div>

<div class="project">
<img src="https://images.unsplash.com/photo-1600573472592-401b489a3cdc?auto=format&fit=crop&w=1000&q=85" alt="Doğal taş proje">
<div class="project-info">
<small>MİMARİ</small>
<h3>Doğal Taş Detayı</h3>
</div>
</div>

</div>
</div>

</div>
</section>

<section class="stone-band">
<div class="container">
<div class="eyebrow">LİDER SEZER STONE</div>

<h2 class="section-title">
Doğal taşta sıradan değil,<br>
karakterli çözümler.
</h2>

<p>
Projenizin ölçülerini veya görsellerini gönderin.
İhtiyacınızı birlikte değerlendirelim.
</p>

<a href="?sayfa=teklif" class="btn btn-gold">Teklif Talebi Oluştur →</a>

</div>
</section>

<section class="section">
<div class="container">

<div class="eyebrow">NEDEN LİDER SEZER STONE?</div>
<h2 class="section-title" style="margin-bottom:55px">Taştan fazlası.</h2>

<div class="info-grid">

<div class="info-card">
<div class="number">01</div>
<h3>Malzeme Bilgisi</h3>
<p>Taşın yalnızca görünümünü değil, kullanım alanına uygunluğunu da değerlendiriyoruz.</p>
</div>

<div class="info-card">
<div class="number">02</div>
<h3>Ölçü Hassasiyeti</h3>
<p>Başarılı bir doğal taş uygulamasının temelini doğru ölçü ve detay planlaması oluşturur.</p>
</div>

<div class="info-card">
<div class="number">03</div>
<h3>Mimari Yaklaşım</h3>
<p>Malzemeyi yapının genel dili ve kullanım amacıyla birlikte ele alıyoruz.</p>
</div>

<div class="info-card">
<div class="number">04</div>
<h3>Özel Üretim</h3>
<p>Standart çözümler yerine proje ihtiyaçlarına göre özel ölçülü uygulamalar geliştiriyoruz.</p>
</div>

<div class="info-card">
<div class="number">05</div>
<h3>Profesyonel Uygulama</h3>
<p>Detaylarda estetik bütünlüğü koruyan düzenli bir uygulama yaklaşımı benimsiyoruz.</p>
</div>

<div class="info-card">
<div class="number">06</div>
<h3>İstanbul</h3>
<p>Eyüpsultan Alibeyköy lokasyonumuzdan projelerinizi değerlendirebilirsiniz.</p>
</div>

</div>
</div>
</section>

<?php elseif($page === 'kurumsal'): ?>

<section class="page-hero">
<div class="container page-hero-inner">
<div class="eyebrow"><?=$current['eyebrow']?></div>
<h1 class="display"><?=$current['h1']?></h1>
</div>
</section>

<section class="section">
<div class="container content-grid">

<div>
<div class="eyebrow">HAKKIMIZDA</div>
<h2 class="section-title">Taşı yalnızca işlemiyor, yorumluyoruz.</h2>

<p class="lead" style="margin-top:30px">
Lider Sezer Stone; mermer, granit ve doğal taş uygulamalarında
mimari ihtiyaçları malzemenin doğal karakteriyle buluşturan
proje odaklı bir yaklaşım benimser.
</p>

<p class="lead" style="margin-top:18px">
Her projenin ölçeği, kullanım amacı, ışığı ve mimari dili farklıdır.
Bu nedenle malzeme seçiminden uygulama detayına kadar bütün süreci
projenin kendi karakterine göre değerlendiriyoruz.
</p>
</div>

<img class="content-img"
src="https://images.unsplash.com/photo-1600566753086-00f18fb6b3ea?auto=format&fit=crop&w=1200&q=85"
alt="Lider Sezer Stone doğal taş">

</div>
</section>

<section class="section dark">
<div class="container">

<div class="eyebrow">ÇALIŞMA PRENSİBİMİZ</div>
<h2 class="section-title">Dört adımda<br>kusursuz süreç.</h2>

<div class="info-grid" style="margin-top:60px">

<div class="info-card" style="background:#171714;border-color:#302f2b">
<div class="number">01</div>
<h3>Keşif</h3>
<p>Projenizi, ihtiyaçları ve kullanım alanlarını değerlendiriyoruz.</p>
</div>

<div class="info-card" style="background:#171714;border-color:#302f2b">
<div class="number">02</div>
<h3>Malzeme</h3>
<p>Mimariye ve kullanım şartlarına uygun taş alternatiflerini belirliyoruz.</p>
</div>

<div class="info-card" style="background:#171714;border-color:#302f2b">
<div class="number">03</div>
<h3>Planlama</h3>
<p>Ölçü ve uygulama detaylarını proje özelinde planlıyoruz.</p>
</div>

<div class="info-card" style="background:#171714;border-color:#302f2b">
<div class="number">04</div>
<h3>Uygulama</h3>
<p>Doğal taşın karakterini ortaya çıkaran profesyonel uygulama gerçekleştiriyoruz.</p>
</div>

</div>
</div>
</section>

<?php elseif($page === 'mermer'): ?>

<section class="page-hero"
style="background-image:linear-gradient(90deg,rgba(10,10,9,.9),rgba(10,10,9,.25)),url('https://images.unsplash.com/photo-1600210492486-724fe5c67fb0?auto=format&fit=crop&w=2200&q=90')">

<div class="container page-hero-inner">
<div class="eyebrow"><?=$current['eyebrow']?></div>
<h1 class="display"><?=$current['h1']?></h1>
</div>
</section>

<section class="section">
<div class="container content-grid">

<img class="content-img"
src="https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?auto=format&fit=crop&w=1100&q=85"
alt="İstanbul mermer uygulama">

<div>
<div class="eyebrow">MERMER ÇÖZÜMLERİ</div>
<h2 class="section-title">Mekânın karakterini değiştiren doğal yüzey.</h2>

<p class="lead" style="margin-top:30px">
Mermer; damar yapısı, doğal renk geçişleri ve her plakada farklılaşan
karakteriyle mimarinin en güçlü malzemelerinden biridir.
</p>

<div class="checks">
<div class="check"><b>01</b><span>Mermer zemin uygulamaları</span></div>
<div class="check"><b>02</b><span>Mermer merdiven ve basamak uygulamaları</span></div>
<div class="check"><b>03</b><span>Mermer duvar kaplamaları</span></div>
<div class="check"><b>04</b><span>Tezgah ve özel ölçü yüzeyler</span></div>
<div class="check"><b>05</b><span>Mimari dekoratif uygulamalar</span></div>
</div>

<div style="margin-top:35px">
<a class="btn btn-dark" href="?sayfa=teklif">Mermer Teklifi Al →</a>
</div>

</div>
</div>
</section>

<?php elseif($page === 'granit'): ?>

<section class="page-hero"
style="background-image:linear-gradient(90deg,rgba(10,10,9,.9),rgba(10,10,9,.25)),url('https://images.unsplash.com/photo-1600573472592-401b489a3cdc?auto=format&fit=crop&w=2200&q=90')">

<div class="container page-hero-inner">
<div class="eyebrow"><?=$current['eyebrow']?></div>
<h1 class="display"><?=$current['h1']?></h1>
</div>
</section>

<section class="section">
<div class="container content-grid">

<div>
<div class="eyebrow">GRANİT ÇÖZÜMLERİ</div>
<h2 class="section-title">Estetik ile dayanıklılığı bir arada.</h2>

<p class="lead" style="margin-top:30px">
Granit, yoğun kullanım gerektiren alanlarda güçlü yapısı ve
özgün dokusuyla mimari projelerde uzun ömürlü çözümler sunar.
</p>

<div class="checks">
<div class="check"><b>01</b><span>Granit zemin uygulamaları</span></div>
<div class="check"><b>02</b><span>Granit basamak ve merdiven</span></div>
<div class="check"><b>03</b><span>Granit tezgah uygulamaları</span></div>
<div class="check"><b>04</b><span>İç ve dış mekân yüzeyleri</span></div>
<div class="check"><b>05</b><span>Proje bazlı özel ölçü üretimler</span></div>
</div>

<div style="margin-top:35px">
<a class="btn btn-dark" href="?sayfa=teklif">Granit Teklifi Al →</a>
</div>
</div>

<img class="content-img"
src="https://images.unsplash.com/photo-1600607688969-a5bfcd646154?auto=format&fit=crop&w=1100&q=85"
alt="İstanbul granit uygulama">

</div>
</section>

<?php elseif($page === 'dogal-tas'): ?>

<section class="page-hero">
<div class="container page-hero-inner">
<div class="eyebrow"><?=$current['eyebrow']?></div>
<h1 class="display"><?=$current['h1']?></h1>
</div>
</section>

<section class="section">
<div class="container">

<div class="intro-grid">
<div>
<div class="eyebrow">DOĞAL MATERYAL</div>
<h2 class="section-title">Tekrarı olmayan yüzeyler.</h2>
</div>

<p class="lead">
Her doğal taş farklı damar yapısına, renk geçişine ve dokuya sahiptir.
Bu benzersizlik, tasarlanan mekâna endüstriyel malzemelerde bulunmayan
özgün bir karakter kazandırır.
</p>
</div>

<div class="category-grid" style="margin-top:70px">

<div class="category-card">
<img src="https://images.unsplash.com/photo-1600210492486-724fe5c67fb0?auto=format&fit=crop&w=1000&q=85" alt="Açık renk doğal taş">
<div class="category-content">
<span class="category-no">01</span>
<h3>Açık Tonlar</h3>
<p>Sade, ferah ve zamansız mimari projeler için.</p>
</div>
</div>

<div class="category-card">
<img src="https://images.unsplash.com/photo-1600607687920-4e2a09cf159d?auto=format&fit=crop&w=1000&q=85" alt="Doğal taş detay">
<div class="category-content">
<span class="category-no">02</span>
<h3>Karakterli Damarlar</h3>
<p>Mekânda odak noktası oluşturan doğal desenler.</p>
</div>
</div>

<div class="category-card">
<img src="https://images.unsplash.com/photo-1618221195710-dd6b41faaea6?auto=format&fit=crop&w=1000&q=85" alt="Koyu doğal taş">
<div class="category-content">
<span class="category-no">03</span>
<h3>Koyu Tonlar</h3>
<p>Güçlü, sofistike ve premium yüzeyler.</p>
</div>
</div>

</div>
</div>
</section>

<?php elseif($page === 'hizmetler'): ?>

<section class="page-hero">
<div class="container page-hero-inner">
<div class="eyebrow"><?=$current['eyebrow']?></div>
<h1 class="display"><?=$current['h1']?></h1>
</div>
</section>

<section class="section">
<div class="container">

<div class="info-grid">

<div class="info-card">
<div class="number">01</div>
<h3>Proje Analizi</h3>
<p>Projenin kullanım amacı, ölçüsü ve mimari beklentileri değerlendirilir.</p>
</div>

<div class="info-card">
<div class="number">02</div>
<h3>Malzeme Seçimi</h3>
<p>İstenen görünüm ve kullanım koşullarına uygun doğal taş seçenekleri belirlenir.</p>
</div>

<div class="info-card">
<div class="number">03</div>
<h3>Ölçülendirme</h3>
<p>Uygulama yapılacak alanlar detaylı olarak ölçülendirilir.</p>
</div>

<div class="info-card">
<div class="number">04</div>
<h3>Kesim & Hazırlık</h3>
<p>Taşlar proje detaylarına uygun ölçü ve uygulama biçiminde hazırlanır.</p>
</div>

<div class="info-card">
<div class="number">05</div>
<h3>Uygulama</h3>
<p>Planlanan mimari detaylara göre sahada profesyonel uygulama gerçekleştirilir.</p>
</div>

<div class="info-card">
<div class="number">06</div>
<h3>Proje Desteği</h3>
<p>Uygulama sürecinin doğru ilerlemesi için proje özelinde destek sağlanır.</p>
</div>

</div>
</div>
</section>

<?php elseif($page === 'projeler'): ?>

<section class="page-hero">
<div class="container page-hero-inner">
<div class="eyebrow"><?=$current['eyebrow']?></div>
<h1 class="display"><?=$current['h1']?></h1>
</div>
</section>

<section class="section">
<div class="container">

<div class="projects">

<div class="project large">
<img src="https://images.unsplash.com/photo-1600210492486-724fe5c67fb0?auto=format&fit=crop&w=1300&q=85" alt="Mermer proje">
<div class="project-info"><small>MERMER</small><h3>İç Mekân Uygulaması</h3></div>
</div>

<div class="project-column">

<div class="project">
<img src="https://images.unsplash.com/photo-1600566753190-17f0baa2a6c3?auto=format&fit=crop&w=1000&q=85" alt="Doğal taş proje">
<div class="project-info"><small>DOĞAL TAŞ</small><h3>Mimari Yüzey</h3></div>
</div>

<div class="project">
<img src="https://images.unsplash.com/photo-1600607688969-a5bfcd646154?auto=format&fit=crop&w=1000&q=85" alt="Mutfak taş uygulama">
<div class="project-info"><small>ÖZEL ÜRETİM</small><h3>Mutfak Yüzeyi</h3></div>
</div>

</div>
</div>

<div class="projects" style="margin-top:18px">

<div class="project-column">

<div class="project">
<img src="https://images.unsplash.com/photo-1618221195710-dd6b41faaea6?auto=format&fit=crop&w=1000&q=85" alt="Doğal taş dekorasyon">
<div class="project-info"><small>MİMARİ</small><h3>Taş Detayı</h3></div>
</div>

<div class="project">
<img src="https://images.unsplash.com/photo-1600573472592-401b489a3cdc?auto=format&fit=crop&w=1000&q=85" alt="Granit proje">
<div class="project-info"><small>GRANİT</small><h3>Dayanıklı Yüzey</h3></div>
</div>

</div>

<div class="project large">
<img src="https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?auto=format&fit=crop&w=1300&q=85" alt="Premium mermer proje">
<div class="project-info"><small>PREMIUM</small><h3>Özel Mermer Uygulaması</h3></div>
</div>

</div>

<div style="text-align:center;margin-top:55px">
<p class="lead" style="margin:0 auto 30px">
Kendi proje fotoğraflarınız geldiğinde bu alan gerçek referans
projeleriniz ile kategori ve lokasyon bazında güncellenebilir.
</p>

<a href="?sayfa=teklif" class="btn btn-dark">Yeni Proje Başlat →</a>
</div>

</div>
</section>

<?php elseif($page === 'iletisim'): ?>

<section class="page-hero">
<div class="container page-hero-inner">
<div class="eyebrow"><?=$current['eyebrow']?></div>
<h1 class="display"><?=$current['h1']?></h1>
</div>
</section>

<section class="section">
<div class="container contact-grid">

<div>

<div class="eyebrow">BİZE ULAŞIN</div>
<h2 class="section-title">Lider Sezer Stone.</h2>

<div class="contact-data">

<div class="contact-item">
<small>TELEFON</small>
<strong><a href="tel:+<?=$phoneRaw?>"><?=$phoneDisplay?></a></strong>
</div>

<div class="contact-item">
<small>WHATSAPP</small>
<strong><a href="<?=$whatsapp?>" target="_blank">Mesaj Gönder →</a></strong>
</div>

<div class="contact-item">
<small>ADRES</small>
<strong><?=$address?></strong>
</div>

</div>
</div>

<div class="form-box">

<h3 style="font-family:'Playfair Display',serif;font-size:38px;margin-bottom:30px">
Projenizi Anlatın
</h3>

<form id="contactForm">

<div class="form-grid">

<div class="field">
<label>Ad Soyad</label>
<input id="name" required>
</div>

<div class="field">
<label>Telefon</label>
<input id="phone" required>
</div>

<div class="field">
<label>Proje Türü</label>
<select id="type">
<option>Mermer</option>
<option>Granit</option>
<option>Doğal Taş</option>
<option>Merdiven / Basamak</option>
<option>Zemin</option>
<option>Tezgah</option>
<option>Diğer</option>
</select>
</div>

<div class="field">
<label>Lokasyon</label>
<input id="location" placeholder="İstanbul / İlçe">
</div>

<div class="field full">
<label>Proje Detayı</label>
<textarea id="message" placeholder="Ölçü, uygulama alanı ve talebinizi yazabilirsiniz."></textarea>
</div>

<div class="field full">
<button class="btn btn-dark" type="submit">
WhatsApp'tan Gönder →
</button>
</div>

</div>
</form>

</div>
</div>
</section>

<iframe
class="map"
loading="lazy"
allowfullscreen
referrerpolicy="no-referrer-when-downgrade"
src="https://www.google.com/maps?q=Lider%20Sezer%20Stone%20Mermer%20Granit%20Alibeykoy%20Ataturk%20Cd%20159%20Eyupsultan%20Istanbul&output=embed">
</iframe>

<?php elseif($page === 'teklif'): ?>

<section class="page-hero">
<div class="container page-hero-inner">
<div class="eyebrow"><?=$current['eyebrow']?></div>
<h1 class="display"><?=$current['h1']?></h1>
</div>
</section>

<section class="section">
<div class="container contact-grid">

<div>
<div class="eyebrow">HIZLI TEKLİF</div>

<h2 class="section-title">
Ölçüyü gönderin,<br>
projeyi konuşalım.
</h2>

<p class="lead" style="margin-top:28px">
Uygulama alanı, yaklaşık ölçüler ve istediğiniz malzeme hakkında
bilgi vererek WhatsApp üzerinden hızlıca iletişime geçebilirsiniz.
</p>

<div class="contact-data">

<div class="contact-item">
<small>TELEFON</small>
<strong><?=$phoneDisplay?></strong>
</div>

<div class="contact-item">
<small>ADRES</small>
<strong><?=$address?></strong>
</div>

</div>
</div>

<div class="form-box">

<form id="quoteForm">
<div class="form-grid">

<div class="field">
<label>Ad Soyad</label>
<input id="qname" required>
</div>

<div class="field">
<label>Telefon</label>
<input id="qphone" required>
</div>

<div class="field">
<label>Malzeme</label>
<select id="qmaterial">
<option>Mermer</option>
<option>Granit</option>
<option>Doğal Taş</option>
<option>Henüz karar vermedim</option>
</select>
</div>

<div class="field">
<label>Uygulama Alanı</label>
<select id="qarea">
<option>Mutfak</option>
<option>Banyo</option>
<option>Merdiven</option>
<option>Zemin</option>
<option>Duvar</option>
<option>Dış Mekân</option>
<option>Ticari Proje</option>
<option>Diğer</option>
</select>
</div>

<div class="field full">
<label>Yaklaşık Ölçüler / Proje Bilgisi</label>
<textarea id="qdetail"></textarea>
</div>

<div class="field full">
<button type="submit" class="btn btn-dark">
Teklif Talebini WhatsApp'tan Gönder →
</button>
</div>

</div>
</form>

</div>
</div>
</section>

<?php elseif($page === 'mermer-uygulama' || $page === 'granit-uygulama'): ?>

<?php
$isMermer = $page === 'mermer-uygulama';

$landingMaterial = $isMermer ? 'Mermer' : 'Granit';

$landingImage = $isMermer
? 'https://images.unsplash.com/photo-1600210492486-724fe5c67fb0?auto=format&fit=crop&w=2200&q=90'
: 'https://images.unsplash.com/photo-1600573472592-401b489a3cdc?auto=format&fit=crop&w=2200&q=90';
?>

<section class="hero"
style="background-image:linear-gradient(90deg,rgba(10,10,9,.94),rgba(10,10,9,.25)),url('<?=$landingImage?>')">

<div class="container hero-content">

<div class="eyebrow">İSTANBUL • <?=$landingMaterial?> UYGULAMA</div>

<h1 class="display">
<?=$landingMaterial?> Projeniz<br>
İçin Teklif Alın.
</h1>

<p class="hero-description">
İstanbul'da <?=$landingMaterial?> uygulama ihtiyacınız için
ölçü ve proje bilgilerinizi gönderin. İhtiyacınızı birlikte değerlendirelim.
</p>

<div class="hero-buttons">
<a href="<?=$whatsapp?>?text=Merhaba%20Lider%20Sezer%20Stone,%20<?=$landingMaterial?>%20uygulaması%20için%20teklif%20almak%20istiyorum."
class="btn btn-gold" target="_blank">
WhatsApp'tan Teklif Al
</a>

<a href="tel:+<?=$phoneRaw?>" class="btn btn-line">
Hemen Ara
</a>
</div>

</div>
</section>

<section class="section">
<div class="container">

<div class="eyebrow">UYGULAMA ALANLARI</div>
<h2 class="section-title"><?=$landingMaterial?> çözümleri.</h2>

<div class="info-grid" style="margin-top:55px">

<div class="info-card"><div class="number">01</div><h3>Zemin</h3><p>Konut ve ticari mekânlarda doğal taş zemin uygulamaları.</p></div>

<div class="info-card"><div class="number">02</div><h3>Merdiven</h3><p>Basamak, rıht ve sahanlık çözümleri.</p></div>

<div class="info-card"><div class="number">03</div><h3>Tezgah</h3><p>Mutfak ve özel kullanım alanları için ölçülü yüzeyler.</p></div>

<div class="info-card"><div class="number">04</div><h3>Duvar</h3><p>Mimari vurgu oluşturan doğal taş duvar yüzeyleri.</p></div>

<div class="info-card"><div class="number">05</div><h3>Ticari Alan</h3><p>Mağaza, ofis ve ticari projeler için proje bazlı çözümler.</p></div>

<div class="info-card"><div class="number">06</div><h3>Özel Proje</h3><p>Standart ölçü dışındaki mimari uygulamalar.</p></div>

</div>

</div>
</section>

<?php endif; ?>

<?php if(!in_array($page,['iletisim','teklif','mermer-uygulama','granit-uygulama'])): ?>

<section class="section" itemscope itemtype="https://schema.org/FAQPage">
<div class="container">

<div style="text-align:center">
<div class="eyebrow">SIK SORULAN SORULAR</div>
<h2 class="section-title">Merak edilenler.</h2>
</div>

<div class="faq">

<div class="faq-item" itemprop="mainEntity" itemscope itemtype="https://schema.org/Question">
<button class="faq-btn">
<span itemprop="name">Mermer ve granit arasında nasıl seçim yapmalıyım?</span>
<span>+</span>
</button>

<div class="faq-content" itemprop="acceptedAnswer" itemscope itemtype="https://schema.org/Answer">
<div itemprop="text">
Doğru seçim kullanım alanına, mimari beklentiye, yüzeyin maruz kalacağı şartlara ve istenen görünüme göre değişir. Proje bilgilerinize göre uygun seçenekleri değerlendirebiliriz.
</div>
</div>
</div>

<div class="faq-item" itemprop="mainEntity" itemscope itemtype="https://schema.org/Question">
<button class="faq-btn">
<span itemprop="name">İstanbul'un hangi bölgelerine hizmet veriyorsunuz?</span>
<span>+</span>
</button>

<div class="faq-content" itemprop="acceptedAnswer" itemscope itemtype="https://schema.org/Answer">
<div itemprop="text">
Merkezimiz Eyüpsultan Alibeyköy'dedir. Projenizin lokasyonunu paylaşarak hizmet ve uygulama detaylarını öğrenebilirsiniz.
</div>
</div>
</div>

<div class="faq-item" itemprop="mainEntity" itemscope itemtype="https://schema.org/Question">
<button class="faq-btn">
<span itemprop="name">Fiyat teklifi nasıl alabilirim?</span>
<span>+</span>
</button>

<div class="faq-content" itemprop="acceptedAnswer" itemscope itemtype="https://schema.org/Answer">
<div itemprop="text">
Yaklaşık ölçüleri, uygulama alanını, malzeme tercihinizi ve mümkünse proje fotoğraflarını WhatsApp üzerinden gönderebilirsiniz.
</div>
</div>
</div>

<div class="faq-item" itemprop="mainEntity" itemscope itemtype="https://schema.org/Question">
<button class="faq-btn">
<span itemprop="name">Özel ölçü uygulama yapılabilir mi?</span>
<span>+</span>
</button>

<div class="faq-content" itemprop="acceptedAnswer" itemscope itemtype="https://schema.org/Answer">
<div itemprop="text">
Projenin teknik detaylarına göre standart dışı ölçüler ve mimari ihtiyaçlar değerlendirilebilir.
</div>
</div>
</div>

</div>
</div>
</section>

<?php endif; ?>

<section class="cta">
<div class="container cta-inner">

<h2>
Projenizde doğal taşın<br>
gücüne yer açın.
</h2>

<a href="<?=$whatsapp?>"
target="_blank"
class="btn btn-dark">
WhatsApp'tan Ulaş →
</a>

</div>
</section>

<footer class="footer">
<div class="container">

<div class="footer-grid">

<div class="footer-about">

<a class="logo" href="?sayfa=anasayfa">
<div class="logo-mark"><span>LS</span></div>
<div class="logo-text">
<strong>LİDER SEZER STONE</strong>
<small>MARBLE & NATURAL STONE</small>
</div>
</a>

<p>
Mermer, granit ve doğal taş çözümlerini modern mimari yaklaşım
ve profesyonel uygulama anlayışıyla buluşturuyoruz.
</p>

</div>

<div>
<h4>KURUMSAL</h4>

<div class="footer-links">
<a href="?sayfa=kurumsal">Hakkımızda</a>
<a href="?sayfa=hizmetler">Hizmetler</a>
<a href="?sayfa=projeler">Projeler</a>
<a href="?sayfa=iletisim">İletişim</a>
</div>
</div>

<div>
<h4>DOĞAL TAŞ</h4>

<div class="footer-links">
<a href="?sayfa=mermer">Mermer</a>
<a href="?sayfa=granit">Granit</a>
<a href="?sayfa=dogal-tas">Doğal Taş</a>
<a href="?sayfa=teklif">Teklif Al</a>
</div>
</div>

<div>
<h4>İLETİŞİM</h4>

<div class="footer-links">
<a href="tel:+<?=$phoneRaw?>"><?=$phoneDisplay?></a>
<a href="<?=$whatsapp?>" target="_blank">WhatsApp</a>
<span><?=$address?></span>
</div>
</div>

</div>

<div class="copyright">

<span>
© <?=date('Y')?> <strong>Lider Sezer Stone</strong>. Tüm hakları saklıdır.
</span>

<span>
Web sitesi <a href="https://ozysocial.com/" target="_blank"><strong>Ozy Social</strong></a>
tarafından aşkla yapılmıştır. ❤️
</span>

</div>

</div>
</footer>

<a class="whatsapp"
href="<?=$whatsapp?>?text=Merhaba%20Lider%20Sezer%20Stone,%20bilgi%20almak%20istiyorum."
target="_blank"
aria-label="WhatsApp">
☏
</a>

<script>

/* MOBİL MENÜ */

const menuBtn = document.getElementById('menuBtn');
const nav = document.getElementById('mainNav');

if(menuBtn){
    menuBtn.addEventListener('click',function(){
        nav.classList.toggle('mobile-open');

        if(nav.classList.contains('mobile-open')){
            menuBtn.innerHTML = '✕';
        }else{
            menuBtn.innerHTML = '☰';
        }
    });
}

/* FAQ */

document.querySelectorAll('.faq-btn').forEach(btn=>{

btn.addEventListener('click',()=>{

const parent = btn.parentElement;
const wasOpen = parent.classList.contains('open');

document.querySelectorAll('.faq-item').forEach(item=>{
item.classList.remove('open');
const plus = item.querySelector('.faq-btn span:last-child');
if(plus) plus.textContent = '+';
});

if(!wasOpen){
parent.classList.add('open');
const plus = parent.querySelector('.faq-btn span:last-child');
if(plus) plus.textContent = '−';
}

});

});


/* CONTACT WHATSAPP */

const contactForm = document.getElementById('contactForm');

if(contactForm){

contactForm.addEventListener('submit',function(e){

e.preventDefault();

const name = document.getElementById('name').value;
const phone = document.getElementById('phone').value;
const type = document.getElementById('type').value;
const location = document.getElementById('location').value;
const message = document.getElementById('message').value;

let text =
`Merhaba Lider Sezer Stone,

Web siteniz üzerinden iletişime geçiyorum.

Ad Soyad: ${name}
Telefon: ${phone}
Proje Türü: ${type}
Lokasyon: ${location}

Proje Detayı:
${message}`;

window.open(
'https://wa.me/<?=$phoneRaw?>?text=' + encodeURIComponent(text),
'_blank'
);

});

}


/* QUOTE WHATSAPP */

const quoteForm = document.getElementById('quoteForm');

if(quoteForm){

quoteForm.addEventListener('submit',function(e){

e.preventDefault();

const name = document.getElementById('qname').value;
const phone = document.getElementById('qphone').value;
const material = document.getElementById('qmaterial').value;
const area = document.getElementById('qarea').value;
const detail = document.getElementById('qdetail').value;

let text =
`Merhaba Lider Sezer Stone,

Fiyat teklifi almak istiyorum.

Ad Soyad: ${name}
Telefon: ${phone}
Malzeme: ${material}
Uygulama Alanı: ${area}

Proje / Ölçü Bilgisi:
${detail}`;

window.open(
'https://wa.me/<?=$phoneRaw?>?text=' + encodeURIComponent(text),
'_blank'
);

});

}

/* SCROLL REVEAL */

const observer = new IntersectionObserver(entries=>{
entries.forEach(entry=>{
if(entry.isIntersecting){
entry.target.style.opacity = 1;
entry.target.style.transform = 'translateY(0)';
}
});
},{
threshold:.08
});

document.querySelectorAll(
'.info-card,.category-card,.project,.service,.content-grid'
).forEach(el=>{
el.style.opacity = 0;
el.style.transform = 'translateY(25px)';
el.style.transition = 'opacity .65s ease, transform .65s ease';
observer.observe(el);
});

</script>

</body>
</html>