/* =========================================================
   Pala Demir Çelik — Frontend Design System
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

:root{
  --font-heading: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --shadow-glow: 0 0 40px color-mix(in srgb, var(--color-primary) 25%, transparent);
  --transition: 200ms cubic-bezier(.4,0,.2,1);
  --container: 1240px;
}

body{
  margin:0;
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  background-image:
    radial-gradient(60% 50% at 85% -10%, color-mix(in srgb, var(--color-primary) 18%, transparent), transparent 60%),
    radial-gradient(50% 40% at 5% 10%, color-mix(in srgb, var(--color-accent) 12%, transparent), transparent 60%);
  background-attachment: fixed;
}

h1,h2,h3,h4,h5,h6{ font-family: var(--font-heading); line-height: 1.15; margin: 0 0 .5em; letter-spacing: -0.01em; }
p{ line-height: 1.7; color: var(--color-muted); margin: 0 0 1em; }
a{ color: var(--color-primary); text-decoration: none; transition: color var(--transition); }
img{ max-width: 100%; display:block; }
ul{ padding-left: 1.2em; }

.container{ width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 20px; }
.section{ padding: 88px 0; }
.section-head{ max-width: 680px; margin: 0 auto 48px; text-align: center; }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-size: 13px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
  padding: 6px 14px; border-radius: 999px; margin-bottom: 16px;
}
.section-head h2{ font-size: clamp(28px, 4vw, 42px); }
.section-head p{ margin-top: 12px; }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family: var(--font-heading); font-weight:600; font-size: 15px;
  padding: 13px 26px; border-radius: var(--radius-sm); border: 1px solid transparent;
  cursor:pointer; transition: transform var(--transition), box-shadow var(--transition), background var(--transition), border-color var(--transition);
  white-space: nowrap;
}
.btn:active{ transform: translateY(1px) scale(.98); }
.btn-primary{
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  color: #fff; box-shadow: 0 8px 30px -8px color-mix(in srgb, var(--color-primary) 60%, transparent);
}
.btn-primary:hover{ box-shadow: 0 12px 36px -6px color-mix(in srgb, var(--color-primary) 75%, transparent); color:#fff; transform: translateY(-2px); }
.btn-outline{ background: transparent; border-color: var(--color-border); color: var(--color-text); }
.btn-outline:hover{ border-color: var(--color-primary); color: var(--color-primary); }
.btn-whatsapp{ background:#25D366; color:#fff; }
.btn-whatsapp:hover{ color:#fff; filter: brightness(1.08); transform: translateY(-2px);}
.btn-sm{ padding: 9px 18px; font-size: 13px; }
.btn-block{ width: 100%; }

/* Header */
.site-header{
  position: sticky; top:0; z-index: 100;
  background: color-mix(in srgb, var(--color-bg) 78%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--color-border);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding: 14px 0; gap: 24px; }
.brand{ display:flex; align-items:center; gap:10px; font-family: var(--font-heading); font-weight:700; font-size: 20px; color: var(--color-text); }
.brand img{ height: 38px; width:auto; }
.main-nav{ display:flex; align-items:center; gap: 6px; }
.main-nav a{
  color: var(--color-text); font-weight: 500; font-size: 14.5px;
  padding: 10px 14px; border-radius: 999px; transition: background var(--transition), color var(--transition);
}
.main-nav a:hover, .main-nav a.active{ background: color-mix(in srgb, var(--color-primary) 14%, transparent); color: var(--color-primary); }
.header-actions{ display:flex; align-items:center; gap: 12px; }
.header-phone{ display:flex; align-items:center; gap:8px; font-weight:600; font-size:14px; color: var(--color-text); }
.header-phone svg{ color: var(--color-primary); flex-shrink:0; }

.menu-toggle{ display:none; background:none; border:1px solid var(--color-border); border-radius:10px; width:44px; height:44px; align-items:center; justify-content:center; cursor:pointer; color: var(--color-text);}

/* Mobile nav */
.mobile-nav{
  position: fixed; inset:0; z-index: 200; background: color-mix(in srgb, var(--color-bg) 96%, transparent);
  backdrop-filter: blur(10px); transform: translateX(100%); transition: transform 280ms cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column; padding: 24px 24px 40px;
}
.mobile-nav.open{ transform: translateX(0); }
.mobile-nav-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom: 32px; }
.mobile-nav a{ display:block; font-family: var(--font-heading); font-size: 22px; font-weight:600; padding: 14px 4px; border-bottom: 1px solid var(--color-border); color: var(--color-text); }
.mobile-nav .btn{ margin-top: 24px; }
.mobile-nav-close{ background:none; border:none; color: var(--color-text); cursor:pointer; }

/* Hero */
.hero{ position:relative; padding: 64px 0 96px; overflow:hidden; }
.hero-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items:center; }
.hero h1{ font-size: clamp(34px, 5.4vw, 62px); }
.hero .lead{ font-size: 18px; max-width: 520px; }
.hero-cta{ display:flex; gap: 14px; flex-wrap:wrap; margin-top: 28px; }
.hero-stats{ display:flex; gap: 32px; margin-top: 40px; flex-wrap:wrap; }
.hero-stat b{ display:block; font-family: var(--font-heading); font-size: 30px; color: var(--color-text); }
.hero-stat span{ font-size: 13px; color: var(--color-muted); }
.hero-visual{ position:relative; border-radius: var(--radius-lg); overflow:hidden; aspect-ratio: 4/5; border: 1px solid var(--color-border); }
.hero-visual img{ width:100%; height:100%; object-fit:cover; }
.hero-visual::after{ content:''; position:absolute; inset:0; background: linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--color-bg) 85%, transparent)); }
.hero-badge{
  position:absolute; bottom: 20px; left:20px; right:20px; z-index:2;
  background: color-mix(in srgb, var(--color-surface) 80%, transparent); backdrop-filter: blur(10px);
  border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 16px 18px;
  display:flex; gap:12px; align-items:center;
}

/* Slider */
.hero-slider{ position:relative; aspect-ratio: 4/5; border-radius: var(--radius-lg); overflow:hidden; border:1px solid var(--color-border); }
.hero-slider .slide{ position:absolute; inset:0; opacity:0; transition: opacity 700ms ease; }
.hero-slider .slide.active{ opacity:1; }
.hero-slider .slide img{ width:100%; height:100%; object-fit:cover; }
.hero-slider::after{ content:''; position:absolute; inset:0; background: linear-gradient(180deg, transparent 45%, color-mix(in srgb, var(--color-bg) 88%, transparent)); pointer-events:none; }

/* Cards */
.grid{ display:grid; gap: 22px; }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }
.grid-2{ grid-template-columns: repeat(2, 1fr); }

.card{
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  overflow:hidden; transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
  display:flex; flex-direction:column;
}
.card:hover{ transform: translateY(-6px); border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border)); box-shadow: 0 20px 50px -20px rgba(0,0,0,.5); }
.card-media{ aspect-ratio: 4/3; overflow:hidden; background: var(--color-surface-2); }
.card-media img{ width:100%; height:100%; object-fit:cover; transition: transform 500ms ease; }
.card:hover .card-media img{ transform: scale(1.06); }
.card-body{ padding: 22px; flex:1; display:flex; flex-direction:column; }
.card-body h3{ font-size: 19px; }
.card-body p{ font-size: 14.5px; flex:1; }
.card-link{ margin-top: 14px; font-weight:600; font-size:14px; display:inline-flex; align-items:center; gap:6px; }
.card-icon{
  width: 52px; height:52px; border-radius: 14px; display:flex; align-items:center; justify-content:center;
  background: color-mix(in srgb, var(--color-primary) 14%, transparent); color: var(--color-primary); margin-bottom: 14px;
}

/* Glass panel */
.glass{
  background: color-mix(in srgb, var(--color-surface) 70%, transparent);
  backdrop-filter: blur(16px); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
}

/* About split */
.about-grid{ display:grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items:center; }
.about-media{ position:relative; border-radius: var(--radius-lg); overflow:hidden; border:1px solid var(--color-border); aspect-ratio: 4/5;}
.about-media img{ width:100%; height:100%; object-fit:cover; }
.feature-list{ display:grid; gap: 14px; margin-top: 24px; }
.feature-item{ display:flex; gap:12px; align-items:flex-start; }
.feature-item .dot{ width:8px; height:8px; border-radius:50%; background: var(--color-primary); margin-top:8px; flex-shrink:0; }
.feature-item h4{ font-size: 16px; margin-bottom: 2px; }
.feature-item p{ margin:0; font-size: 14px; }

/* Stats band */
.stats-band{ border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); padding: 40px 0; }
.stats-band .grid-4{ text-align:center; }
.stat b{ display:block; font-family: var(--font-heading); font-size: 34px; background: linear-gradient(135deg, var(--color-primary), var(--color-accent)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.stat span{ font-size: 13px; color: var(--color-muted); }

/* Progress bars */
.progress-item{ margin-bottom: 18px; }
.progress-item .top{ display:flex; justify-content:space-between; font-size: 13px; margin-bottom:6px; }
.progress-bar{ height: 8px; background: var(--color-surface-2); border-radius: 999px; overflow:hidden; }
.progress-bar span{ display:block; height:100%; border-radius:999px; background: linear-gradient(90deg, var(--color-primary), var(--color-accent)); }

/* CTA band */
.cta-band{
  border-radius: var(--radius-lg); padding: 56px; text-align:center; position:relative; overflow:hidden;
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 18%, var(--color-surface)), color-mix(in srgb, var(--color-accent) 12%, var(--color-surface)));
  border: 1px solid var(--color-border);
}
.cta-band h2{ font-size: clamp(24px,3.4vw,36px); }
.cta-actions{ display:flex; gap:14px; justify-content:center; margin-top: 22px; flex-wrap:wrap; }

/* Team */
.team-card{ text-align:center; }
.team-card .card-media{ aspect-ratio: 1/1; border-radius: 999px; margin: 22px auto 0; width: 130px; }
.team-card .card-body{ align-items:center; text-align:center; padding-top:14px; }
.team-social{ display:flex; gap:10px; margin-top: 10px; }
.team-social a{ width:32px; height:32px; border-radius:50%; border:1px solid var(--color-border); display:flex; align-items:center; justify-content:center; color: var(--color-muted); }
.team-social a:hover{ color: var(--color-primary); border-color: var(--color-primary); }

/* Contact */
.contact-grid{ display:grid; grid-template-columns: .85fr 1.15fr; gap: 40px; }
.contact-info-card{ padding: 28px; display:flex; flex-direction:column; gap: 20px; }
.info-row{ display:flex; gap: 14px; align-items:flex-start; }
.info-row .icon{ width:42px; height:42px; border-radius:12px; background: color-mix(in srgb, var(--color-primary) 14%, transparent); color:var(--color-primary); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.info-row h4{ font-size: 14px; margin:0 0 4px; }
.info-row p, .info-row a{ margin:0; font-size: 14px; color: var(--color-text); }
.map-frame{ border-radius: var(--radius-lg); overflow:hidden; border:1px solid var(--color-border); }
.map-frame iframe{ width:100%; height: 260px; border:0; display:block; }

/* Forms */
.form-group{ margin-bottom: 18px; }
.form-group label{ display:block; font-size: 13px; font-weight:600; margin-bottom: 7px; }
.form-control{
  width:100%; padding: 13px 15px; border-radius: var(--radius-sm); border: 1px solid var(--color-border);
  background: var(--color-surface-2); color: var(--color-text); font-family: var(--font-body); font-size: 14.5px;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-control:focus{ outline:none; border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent); }
textarea.form-control{ resize: vertical; min-height: 130px; }
.form-error{ color: var(--color-danger); font-size: 13px; margin-top: 6px; }
.form-success{ background: color-mix(in srgb, var(--color-success) 14%, transparent); border:1px solid color-mix(in srgb, var(--color-success) 40%, transparent); color: var(--color-success); padding: 14px 16px; border-radius: var(--radius-sm); margin-bottom: 20px; font-size: 14px; }
.form-fail{ background: color-mix(in srgb, var(--color-danger) 14%, transparent); border:1px solid color-mix(in srgb, var(--color-danger) 40%, transparent); color: var(--color-danger); padding: 14px 16px; border-radius: var(--radius-sm); margin-bottom: 20px; font-size: 14px; }

/* Breadcrumb */
.breadcrumb{ padding: 18px 0; font-size: 13px; }
.breadcrumb ol{ list-style:none; display:flex; gap:8px; padding:0; margin:0; flex-wrap:wrap; color: var(--color-muted); }
.breadcrumb li:not(:last-child)::after{ content:'/'; margin-left:8px; color: var(--color-border); }
.breadcrumb a{ color: var(--color-muted); }
.breadcrumb a:hover{ color: var(--color-primary); }
.page-hero{ padding: 44px 0 12px; }
.page-hero h1{ font-size: clamp(28px, 4vw, 42px); }

/* Gallery */
.gallery-filters{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom: 30px; }
.filter-btn{
  padding: 8px 18px; border-radius: 999px; border:1px solid var(--color-border); background: transparent;
  color: var(--color-muted); font-size: 13.5px; font-weight:600; cursor:pointer; transition: all var(--transition);
}
.filter-btn.active, .filter-btn:hover{ background: var(--color-primary); color:#fff; border-color: var(--color-primary); }
.gallery-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.gallery-item{ border-radius: var(--radius-md); overflow:hidden; aspect-ratio: 1/1; border:1px solid var(--color-border); cursor:zoom-in; position:relative; }
.gallery-item img{ width:100%; height:100%; object-fit:cover; transition: transform 400ms ease; }
.gallery-item:hover img{ transform: scale(1.08); }

/* Lightbox */
.lightbox{ position:fixed; inset:0; background: rgba(0,0,0,.92); z-index:300; display:none; align-items:center; justify-content:center; padding: 30px; }
.lightbox.open{ display:flex; }
.lightbox img{ max-width: 90vw; max-height: 85vh; border-radius: 12px; }
.lightbox-close{ position:absolute; top:24px; right:24px; background:none; border:1px solid rgba(255,255,255,.3); color:#fff; width:44px; height:44px; border-radius:50%; cursor:pointer; }

/* Footer */
.site-footer{ border-top: 1px solid var(--color-border); padding-top: 64px; margin-top: 40px; background: var(--color-surface); }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 48px; }
.footer-col h5{ font-size:14px; text-transform:uppercase; letter-spacing:.06em; margin-bottom:18px; color: var(--color-text); }
.footer-col ul{ list-style:none; padding:0; margin:0; display:grid; gap: 10px; }
.footer-col a{ color: var(--color-muted); font-size: 14px; }
.footer-col a:hover{ color: var(--color-primary); }
.footer-social{ display:flex; gap:10px; margin-top: 16px; }
.footer-social a{ width:38px; height:38px; border-radius:10px; border:1px solid var(--color-border); display:flex; align-items:center; justify-content:center; color: var(--color-muted); }
.footer-social a:hover{ color:#fff; background: var(--color-primary); border-color: var(--color-primary); }
.footer-bottom{ border-top:1px solid var(--color-border); padding: 20px 0; display:flex; justify-content:space-between; flex-wrap:wrap; gap: 10px; font-size: 13px; color: var(--color-muted); }

/* Floating WhatsApp */
.float-whatsapp{
  position: fixed; bottom: 24px; right: 24px; z-index: 150; width: 60px; height:60px; border-radius:50%;
  background:#25D366; display:flex; align-items:center; justify-content:center; color:#fff;
  box-shadow: 0 10px 30px -6px rgba(37,211,102,.6); transition: transform var(--transition);
}
.float-whatsapp:hover{ transform: scale(1.08); color:#fff; }

/* Skeleton */
.skeleton{ background: linear-gradient(90deg, var(--color-surface-2) 25%, var(--color-border) 37%, var(--color-surface-2) 63%); background-size: 400% 100%; animation: skeleton-loading 1.4s ease infinite; border-radius: var(--radius-md); }
@keyframes skeleton-loading{ 0%{background-position:100% 50%;} 100%{background-position:0 50%;} }

/* Toast */
.toast-wrap{ position: fixed; top: 20px; right: 20px; z-index: 400; display:flex; flex-direction:column; gap:10px; }
.toast{ background: var(--color-surface); border:1px solid var(--color-border); border-radius: 12px; padding: 14px 18px; font-size:14px; box-shadow: 0 12px 30px -10px rgba(0,0,0,.4); animation: toast-in 250ms ease; }
@keyframes toast-in{ from{ opacity:0; transform: translateY(-10px);} to{opacity:1; transform:translateY(0);} }

/* Error pages */
.error-page{ min-height: 70vh; display:flex; align-items:center; justify-content:center; text-align:center; padding: 60px 20px; }
.error-code{ font-family: var(--font-heading); font-size: clamp(80px,14vw,160px); font-weight:700; line-height:1; background: linear-gradient(135deg, var(--color-primary), var(--color-accent)); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* Utilities */
.text-center{ text-align:center; }
.mt-0{ margin-top:0; } .mb-0{ margin-bottom:0; }
.visually-hidden{ position:absolute; width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0); white-space:nowrap; }
.badge{ display:inline-block; font-size:12px; font-weight:600; padding:4px 10px; border-radius:999px; background: color-mix(in srgb, var(--color-primary) 16%, transparent); color: var(--color-primary);}

/* Responsive */
@media (max-width: 1024px){
  .hero-grid, .about-grid, .contact-grid{ grid-template-columns: 1fr; }
  .grid-4{ grid-template-columns: repeat(2,1fr); }
  .grid-3{ grid-template-columns: repeat(2,1fr); }
  .footer-grid{ grid-template-columns: repeat(2,1fr); }
  .gallery-grid{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 768px){
  .main-nav, .header-phone span, .header-actions .btn-outline{ display:none; }
  .menu-toggle{ display:flex; }
  .section{ padding: 56px 0; }
  .grid-4, .grid-3, .grid-2{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr; gap: 28px; }
  .cta-band{ padding: 36px 20px; }
  .gallery-grid{ grid-template-columns: repeat(2,1fr); }
  .hero-stats{ gap: 20px; }
}
@media (max-width: 480px){
  .gallery-grid{ grid-template-columns: 1fr 1fr; }
  .float-whatsapp{ width:52px; height:52px; bottom:16px; right:16px; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}