/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  Mersin Yönetim — Profesyonel Site ve Apartman Yönetimi
  Tema: Navy (#0f1923) + Gold (#c8963e)
  Sıfır bağımlılık, vanilla CSS
  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/

:root {
  --navy: #0f1923;
  --navy-light: #1a2d3d;
  --gold: #c8963e;
  --gold-light: #d4a54e;
  --white: #fff;
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-600: #6b7280;
  --gray-800: #2d3748;
  --green: #27ae60;
  --green-dark: #1e8449;
  --red: #e74c3c;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
  --shadow-lg: 0 8px 30px rgba(0,0,0,0.12);
  --transition: 0.2s ease;
  --max-width: 1200px;
}

/* ── Reset ───────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  color:#333;line-height:1.7;background:var(--white);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold);text-decoration:none;transition:color var(--transition)}
a:hover{color:var(--gold-light)}
h1,h2,h3,h4{line-height:1.3;color:var(--navy)}
h1{font-size:clamp(1.6rem,4vw,2.5rem)}
h2{font-size:clamp(1.4rem,3vw,2rem)}
h3{font-size:clamp(1.1rem,2.5vw,1.5rem)}

/* ── Container ──────────────────────────── */
.container{width:100%;max-width:var(--max-width);margin:0 auto;padding:0 clamp(16px,3vw,32px)}

/* ── Skip to content (a11y) ─────────────── */
.skip-link{position:absolute;top:-100px;left:0;background:var(--gold);color:var(--navy);padding:0.5rem 1rem;z-index:9999;font-weight:700}
.skip-link:focus{top:0}

/* ── Navbar ─────────────────────────────── */
.navbar{background:var(--navy);color:var(--white);position:sticky;top:0;z-index:1000;box-shadow:0 2px 12px rgba(0,0,0,0.2)}
.navbar-inner{max-width:var(--max-width);margin:0 auto;display:flex;justify-content:space-between;align-items:center;padding:0 clamp(16px,3vw,24px);height:64px}
.navbar-brand{font-size:1.15rem;font-weight:700;color:var(--white);display:flex;align-items:center;gap:6px;white-space:nowrap}
.navbar-brand span{color:var(--gold)}
.navbar-links{display:flex;gap:4px;align-items:center}
.navbar-links a{color:#c0c8d0;text-decoration:none;padding:8px 14px;border-radius:var(--radius-sm);font-size:0.9rem;transition:all var(--transition)}
.navbar-links a:hover,.navbar-links a.active{color:var(--white);background:rgba(200,150,62,0.15)}
.navbar-phone{color:#4caf50;font-weight:700;font-size:0.9rem;white-space:nowrap}
.navbar-phone a{color:inherit}
.hamburger{display:none;background:none;border:none;color:var(--white);font-size:1.5rem;cursor:pointer;padding:8px;line-height:1}

/* ── Breadcrumb ─────────────────────────── */
.breadcrumb{background:var(--gray-100);padding:12px 0;font-size:0.85rem}
.breadcrumb-inner{max-width:var(--max-width);margin:0 auto;padding:0 clamp(16px,3vw,32px);color:var(--gray-600)}
.breadcrumb a{color:var(--navy)}
.breadcrumb span{color:var(--gray-600)}

/* ── Hero ───────────────────────────────── */
.hero{background:linear-gradient(135deg,var(--navy) 0%,#1a3040 100%);color:var(--white);padding:clamp(40px,8vw,80px) clamp(16px,3vw,24px);text-align:center;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle at 70% 20%,rgba(200,150,62,0.06) 0%,transparent 50%);pointer-events:none}
.hero-inner{max-width:800px;margin:0 auto;position:relative;z-index:1}
.hero h1{color:var(--white);margin-bottom:1rem}
.hero p{font-size:1.1rem;opacity:0.85;margin-bottom:1.75rem;max-width:650px;margin-left:auto;margin-right:auto}
.hero-badge{display:inline-block;background:rgba(200,150,62,0.15);color:var(--gold-light);padding:4px 14px;border-radius:20px;font-size:0.8rem;font-weight:600;margin-bottom:1rem;letter-spacing:1px;text-transform:uppercase}

/* ── Buttons ────────────────────────────── */
.btn{display:inline-block;padding:0.75rem 1.75rem;border-radius:var(--radius-sm);font-weight:700;font-size:1rem;transition:all var(--transition);cursor:pointer;border:none;text-align:center}
.btn-gold{background:var(--gold);color:var(--navy)}
.btn-gold:hover{background:var(--gold-light);color:var(--navy)}
.btn-green{background:linear-gradient(#2ecc71,#27ae60);color:#fff;box-shadow:0 4px 0 var(--green-dark),0 6px 16px rgba(0,0,0,0.15);text-shadow:0 1px 1px rgba(0,0,0,0.15)}
.btn-green:hover{transform:translateY(2px);box-shadow:0 2px 0 var(--green-dark),0 3px 8px rgba(0,0,0,0.15)}
.btn-white{background:var(--white);color:var(--navy)}
.btn-outline{border:2px solid var(--gold);color:var(--gold);background:transparent}
.btn-outline:hover{background:var(--gold);color:var(--navy)}

/* ── Sections ───────────────────────────── */
.section{padding:clamp(40px,6vw,70px) 0}
.section-header{text-align:center;margin-bottom:3rem}
.section-badge{display:inline-block;color:var(--gold);font-size:0.8rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:0.5rem}
.section-header h2{position:relative;display:inline-block}
.section-header h2::after{content:'';display:block;width:60px;height:3px;background:var(--gold);margin:0.75rem auto 0;border-radius:2px}
.section-header p{color:var(--gray-600);max-width:600px;margin:0.75rem auto 0}

/* ── Grids ──────────────────────────────── */
.grid-2{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,400px),1fr));gap:clamp(16px,2vw,28px)}
.grid-3{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:clamp(16px,2vw,24px)}
.grid-4{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:clamp(16px,2vw,24px)}

/* ── Cards ──────────────────────────────── */
.card{background:var(--white);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:clamp(20px,3vw,30px);transition:all var(--transition);border:1px solid var(--gray-200)}
.card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px);border-color:var(--gold)}
.card-icon{font-size:2.2rem;margin-bottom:1rem;display:block}
.card h3{margin-bottom:0.5rem}

/* ── Feature cards (left border accent) ── */
.feature-card{background:var(--gray-50);padding:clamp(20px,3vw,28px);border-radius:var(--radius-sm);border-left:4px solid var(--gold);transition:all var(--transition)}
.feature-card:hover{border-left-color:var(--gold-light);background:#f0ede8}
.feature-card h3{font-size:1.05rem;margin-bottom:0.4rem;color:var(--navy)}

/* ── Service cards ──────────────────────── */
.service-card{background:var(--white);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:clamp(20px,3vw,28px);text-align:center;display:flex;flex-direction:column;border-top:4px solid var(--gold);transition:all var(--transition)}
.service-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px)}
.service-card h3{color:var(--navy)}
.service-card p{color:var(--gray-600);font-size:0.93rem;flex:1}
.service-card .price{margin-top:auto;padding-top:1rem}

/* ── Price tag (WhatsApp link) ──────────── */
.price-tag{display:inline-block;background:linear-gradient(#2ecc71,#27ae60);color:#fff;padding:8px 18px;border-radius:20px;font-weight:700;font-size:0.9rem;box-shadow:0 4px 0 var(--green-dark),0 6px 12px rgba(0,0,0,0.15);text-shadow:0 1px 1px rgba(0,0,0,0.2);transition:all 0.15s}
.price-tag:hover{transform:translateY(2px);box-shadow:0 2px 0 var(--green-dark),0 3px 6px rgba(0,0,0,0.15);color:#fff}

/* ── Stats ──────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:clamp(12px,2vw,20px);text-align:center}
.stat-number{font-size:2.2rem;font-weight:800;color:var(--gold)}
.stat-label{font-size:0.85rem;color:var(--gray-600);margin-top:0.25rem}

/* ── CTA section ────────────────────────── */
.cta-section{background:var(--navy);color:var(--white);text-align:center;padding:clamp(40px,6vw,60px) clamp(16px,3vw,24px)}
.cta-section h2{color:var(--white);margin-bottom:0.75rem}
.cta-section p{opacity:0.8;margin-bottom:1.5rem;max-width:550px;margin-left:auto;margin-right:auto}

/* ── Content page ───────────────────────── */
.content-page{padding:clamp(30px,5vw,50px) 0}
.content-page h1{margin-bottom:1rem}
.content-page h2{margin:2rem 0 1rem}
.content-page p{margin-bottom:1rem;color:#444}
.content-page ul,.content-page ol{margin:1rem 0 1rem 1.5rem}
.content-page li{margin-bottom:0.5rem}

/* ── Info boxes ─────────────────────────── */
.info-box{padding:1.25rem 1.5rem;border-radius:var(--radius-sm);margin:1.5rem 0;border-left:4px solid}
.info-box.blue{background:#e8f4fd;border-color:#0056b3}
.info-box.green{background:#eafaf1;border-color:#27ae60}
.info-box.yellow{background:#fef9e7;border-color:#f39c12}
.info-box.red{background:#fdedec;border-color:#e74c3c}

/* ── Contact page ───────────────────────── */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px)}
.contact-info-item{display:flex;align-items:flex-start;gap:1rem;margin-bottom:1.5rem}
.contact-icon{font-size:1.5rem;flex-shrink:0;width:40px;text-align:center}
.form-group{margin-bottom:1.25rem}
.form-group label{display:block;font-weight:600;margin-bottom:0.3rem;font-size:0.9rem;color:var(--navy)}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:0.75rem 1rem;border:2px solid var(--gray-200);border-radius:var(--radius-sm);font-size:1rem;font-family:inherit;transition:border-color var(--transition);background:#fff}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--gold)}

/* ── Footer ─────────────────────────────── */
.footer{background:var(--navy);color:#a0a8b0;padding:clamp(30px,5vw,50px) 0 20px}
.footer-inner{max-width:var(--max-width);margin:0 auto;padding:0 clamp(16px,3vw,32px);display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:clamp(20px,3vw,40px)}
.footer-col h4{color:var(--white);margin-bottom:1rem;font-size:1rem}
.footer-col a{display:block;color:#889098;padding:4px 0;font-size:0.88rem;transition:color var(--transition)}
.footer-col a:hover{color:var(--gold)}
.footer-bottom{text-align:center;padding-top:20px;margin-top:30px;border-top:1px solid rgba(255,255,255,0.08);font-size:0.82rem;color:#6a7280}

/* ── WhatsApp floating button ───────────── */
.whatsapp-float{position:fixed;bottom:25px;right:25px;z-index:9999;background:#25D366;color:#fff;width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 15px rgba(37,211,102,0.4);transition:all 0.3s}
.whatsapp-float:hover{transform:scale(1.1);box-shadow:0 6px 20px rgba(37,211,102,0.5);color:#fff}

/* ── Mobile ─────────────────────────────── */
@media(max-width:768px){
  .navbar-links{display:none;flex-direction:column;position:absolute;top:64px;left:0;right:0;background:var(--navy);padding:1rem;box-shadow:var(--shadow-lg)}
  .navbar-links.open{display:flex}
  .hamburger{display:block}
  .hero-features{flex-direction:column;align-items:center}
  .contact-grid{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .footer-inner{grid-template-columns:1fr 1fr}
}

@media(max-width:480px){
  .footer-inner{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
}