/*
  style.css - SİMAK VİNÇ MANİTOU
  Profesyonel renk paleti uygulaması ve temel stiller
*/
:root {
  --primary-color: #1A237E;    /* ana renk - koyu lacivert */
  --secondary-color: #FF9800;  /* ikincil vurgu - turuncu (hover/CTA) */
  --background-color: #F5F5F5; /* sayfa arka planı */
  --text-color: #071028;       /* ana metin rengi - daha koyu/kontrastlı */
  --highlight-color: #03A9F4;  /* küçük vurgular için parlak mavi */
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: 'Poppins', sans-serif;
  margin: 0;
  color: var(--text-color);
  background: var(--background-color);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.container { width: 92%; max-width: 1200px; margin: 0 auto; }

/* Headings */
h1, h2, h3 { color: var(--primary-color); margin: 0 0 12px; }
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }

/* Header */
header {
  background: var(--primary-color);
  color: #fff;
  padding: 12px 0;
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: background 0.25s ease, box-shadow 0.25s ease;
}
.header-inner { display:flex; align-items:center; gap:16px; }
.logo { display:flex; align-items:center; gap:10px; }
.logo-text { font-weight:700; font-size:1.15rem; color: #fff; }
.logo-icon { display:none; }
/* Visible company name in header (prominent, attention-grabbing) */
.logo-text {
  color: #fff;
  display: inline-flex;
  align-items: center;
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin-left: 8px;
  text-shadow: 0 2px 6px rgba(0,0,0,0.35);
}
.logo-text::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 28px;
  background: var(--secondary-color);
  border-radius: 4px;
  margin-right: 10px;
  vertical-align: middle;
}
.brand .logo-text {
  transition: transform .14s ease, color .16s ease, text-shadow .16s ease;
  cursor: pointer;
}
.brand:hover .logo-text,
.brand:focus-within .logo-text {
  transform: translateY(-2px) scale(1.03);
  color: var(--secondary-color);
  text-shadow: 0 6px 18px rgba(0,0,0,0.5);
}
.brand:focus-within { outline: none; }
.brand:focus-visible .logo-text { box-shadow: 0 0 0 3px rgba(255,255,255,0.06); border-radius:4px; }
@media (prefers-reduced-motion: reduce) {
  .brand .logo-text,
  .brand:hover .logo-text,
  .brand:focus-within .logo-text { transition: none; transform: none; }
}
.brand .sr-only { position: absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
/* Image logo sizing to match previous inline SVG size */
.site-logo { width:56px; height:56px; display:inline-block; vertical-align:middle; object-fit:contain; }

nav { flex: 1; }
nav ul { list-style:none; margin:0; padding:0; display:flex; gap:12px; justify-content:flex-end; }
nav ul li a {
  color: #fff; text-decoration:none; padding:6px 10px; border-radius:6px; display:inline-block; transition: background .18s ease, color .18s ease;
}
nav ul li a.active, nav ul li a:hover { background: var(--secondary-color); color: #000; }

.actions { display:flex; align-items:center; gap:8px; }
#mobile-menu-toggle { display:none; background:transparent; border:0; color:#fff; font-size:1.1rem; }
.call-btn { background: var(--primary-color); color:#fff; padding:8px 12px; border-radius:6px; text-decoration:none; font-weight:600; border:2px solid transparent; }
.call-btn:hover, .call-btn:focus { background: var(--secondary-color); color:#000; }

/* Hero: now uses responsive <picture> with overlay for contrast.
   Preferred flow: local optimized files at img/hero-{800,1200,1800}.{webp,jpg}.
   If local files are missing, the <img onerror> falls back to a reliable hotlink. */
.hero {
  position: relative;
  color: #fff;
  text-align: center;
  padding: 90px 20px;
  min-height: 640px; /* increased to better accommodate large hero imagery */
  display: flex;
  align-items: center;
  overflow: hidden;
}
/* Neutral background to avoid a strong colored flash while hero image loads. The
   overlay still provides contrast for text. Adjust colors if you prefer a lighter
   or different accent. */
.hero {
  background: linear-gradient(180deg, #0f1720 0%, #0b1220 100%);
}
.hero-media { position: absolute; inset: 0; z-index: 0; display: block; }
.hero-media img.hero-img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity .38s ease; }
.hero-media img.hero-img.loaded { opacity: 1; }
.hero-media svg#hero-svg-fallback { position: absolute; inset: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; z-index: 0; }
.hero-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.35)); pointer-events: none; }
.hero-inner { position: relative; z-index: 2; width: 100%; }
.hero h1 { font-size: 2.6rem; margin-bottom: 8px; text-shadow: 0 2px 8px rgba(0,0,0,0.45); }
.lead { font-size: 1.15rem; margin-bottom: 18px; text-shadow: 0 1px 6px rgba(0,0,0,0.35); color: rgba(255,255,255,0.95); }
.hero-buttons .btn { margin: 6px; }

/* Buttons: primary by default, orange on hover */
.btn {
  background: var(--primary-color);
  color: #fff;
  padding: 10px 16px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  display: inline-block;
  border: 2px solid transparent;
  transition: background .18s ease, color .18s ease, transform .08s ease;
}
.btn.small { padding:8px 12px; font-size:0.95rem; }
.btn:hover, .btn:focus { background: var(--secondary-color); color: #000; transform: translateY(-2px); }

/* Services */
.services.preview { padding:50px 0; }
.service-cards { display:flex; gap:18px; justify-content:center; flex-wrap:wrap; }
.card { background:#fff; border-radius:8px; padding:12px; box-shadow:0 6px 18px rgba(0,0,0,0.06); width:300px; text-align:left; }
.card img { width:100%; height:180px; object-fit:cover; border-radius:6px; }

/* Services list (detailed page) - make images constrained and layout responsive */
.service-list { display:flex; flex-direction:column; gap:18px; }
.service-item { display:flex; gap:18px; align-items:flex-start; background:#fff; padding:14px; border-radius:10px; box-shadow:0 8px 20px rgba(0,0,0,0.04); }
.service-item .service-media { width: 320px; max-width: 40%; height: 220px; object-fit: cover; border-radius:8px; flex-shrink:0; }
.service-item .service-body { flex:1; }

@media (max-width: 900px) {
  .service-item { flex-direction: column; align-items:stretch; }
  .service-item .service-media { width:100%; max-width:100%; height:200px; }
}
  .logo-text { font-size: 1rem; }
  .logo-text::before { height: 20px; width:5px; margin-right:8px; }

/* Advantages */
.advantages { background:#fff; padding:40px 0; }
.advantage-cards { display:flex; gap:18px; justify-content:center; flex-wrap:wrap; }
.adv-card { background:transparent; text-align:center; padding:12px; min-width:140px; }
.adv-card i { font-size:1.6rem; color: var(--highlight-color); }
.adv-card p { margin-top:8px; color:var(--text-color); }

/* Gallery */
.gallery-preview { padding:40px 0; }
.gallery-grid { display:grid; /* responsive columns that adapt to viewport */
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap:12px; align-items:start; }
.gallery-item { position:relative; overflow:hidden; border-radius:8px; }
.gallery-item img { width:100%; height:auto; object-fit:cover; transition: transform .45s; display:block; aspect-ratio: 16/9; }
.gallery-item:hover img { transform: scale(1.06); }
.overlay { position:absolute; left:0; right:0; bottom:0; padding:12px; background: linear-gradient(transparent, rgba(0,0,0,0.6)); color:#fff; transform:translateY(100%); transition: transform .3s; }
.gallery-grid .overlay, .gallery-preview .overlay { display: none; }
.gallery-item:hover .overlay { transform: translateY(0); }

/* Homepage gallery preview thumbnails use .gallery-thumb — ensure they match .gallery-item sizing
   so preview images don't render at their full native height and break layout. */
.gallery-thumb { position: relative; overflow: hidden; border-radius: 8px; display:block; }
.gallery-thumb img { width: 100%; height: auto; object-fit: cover; transition: transform .45s; display:block; border-radius: 8px; aspect-ratio: 16/9; }
.gallery-thumb:hover img { transform: scale(1.06); }
.gallery-thumb .overlay { position:absolute; left:0; right:0; bottom:0; padding:12px; background: linear-gradient(transparent, rgba(0,0,0,0.55)); color:#fff; transform: translateY(100%); transition: transform .3s; display:block; }
.gallery-thumb:hover .overlay { transform: translateY(0); }

/* Testimonials */
.testimonials { padding:40px 0; }
.testimonial-cards { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
blockquote.card { background:#fff; padding:18px; border-radius:8px; max-width:320px; color:var(--text-color); }

/* FAQ / Accordion */
.faq { padding:36px 0; }
.accordion-item { background:#fff; border-radius:8px; margin-bottom:8px; overflow:hidden; border:1px solid #eee; }
.accordion-toggle { width:100%; text-align:left; padding:14px 16px; background:transparent; border:0; font-weight:600; cursor:pointer; color:var(--text-color); }
.accordion-toggle:after { content:'+'; float:right; }
.accordion-toggle[aria-expanded="true"]:after { content:'−'; }
.accordion-panel { padding:0 16px 16px; display:none; color:#333; }
.accordion-panel.open { display:block; }

/* CTA strip */
.cta-strip { background: var(--primary-color); color:#fff; padding:18px 0; margin-top:18px; }
.cta-strip .container { display:flex; align-items:center; justify-content:space-between; gap:18px; }
.cta-strip .cta-content h3 { margin:0; color:#fff; }
.cta-strip .cta-content p { margin:6px 0 0; color:#fff; }
.cta-strip .cta-actions { display:flex; gap:12px; align-items:center; }
.cta-strip .btn { background:#fff; color:var(--primary-color); }
.cta-strip .btn:hover { background: var(--secondary-color); color:#000; }

/* Machine detail page */
.machine-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start; }
.machine-media img { width:100%; border-radius:8px; }
.machine-specs ul { list-style:disc; padding-left:18px; color:var(--text-color); }

/* Contact & Page layout */
.page { padding:48px 0; }
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
/* Mobile-specific improvements: reduce hero height, stack hero buttons, improve touch targets */
@media (max-width: 700px) {
  .hero { min-height: 380px; padding: 56px 12px; }
  .hero h1 { font-size: 1.6rem; }
  .lead { font-size: 1rem; }
  .hero-buttons { display:flex; flex-direction:column; gap:10px; align-items:center; }
  .hero-buttons .btn { width:100%; max-width:340px; }
  .card { width: 100%; max-width: 520px; }
  .service-cards { gap:12px; }
  .call-btn, .contact-ctas .btn { padding: 12px 14px; font-size: 1rem; }
  /* Compact the fixed CTAs a bit on small screens so they don't obscure content */
  .whatsapp-fixed-left, .call-fixed-left { right: 12px; bottom: 12px; padding: 8px 10px; border-radius: 20px; }
  .whatsapp-fixed-left .wa-label, .call-fixed-left .call-label { display: none; }
}
.contact-info p { margin:8px 0; }
.contact-form form { background:#fff; padding:16px; border-radius:8px; box-shadow:0 6px 18px rgba(0,0,0,0.06); }
.contact-form input, .contact-form textarea { width:100%; padding:8px; margin:8px 0; border:1px solid #ddd; border-radius:6px; }
.form-message { margin-top:8px; color:var(--text-color); }

/* Contact column styles */
.contact-info { background: #fff; padding: 24px; border-radius: 8px; box-shadow: 0 8px 20px rgba(0,0,0,0.06); display:flex; flex-direction:column; gap:12px; }
.contact-info .intro { font-size: 1.05rem; color: #122033; margin-bottom:8px; }
.contact-items { display:flex; flex-direction:column; gap:10px; }
.contact-item { display:flex; flex-direction:column; gap:6px; }
.contact-item strong { font-size:0.95rem; color:var(--primary-color); }
.contact-item a {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-color); /* daha iyi kontrast için koyu metin rengi */
  text-decoration: none;
  display: inline-block;
  padding: 0; /* remove yellow-chip padding */
  background: transparent; /* remove yellow background */
  border-radius: 0;
  transition: color .12s ease, transform .12s ease;
  cursor: pointer;
}
.contact-item a:hover, .contact-item a:focus {
  text-decoration: underline;
  color: var(--primary-color);
}
.contact-item.phone a { color: var(--primary-color); }
.contact-item.whatsapp a { color: #12723a; /* WhatsApp darker green for contrast */ }
.contact-item.email a { color: #0b2340; }

/* Remove underline specifically for email chip (keeps numbers underlined) */
.contact-item.email a { text-decoration: none; }

.contact-item a:hover, .contact-item a:focus {
  transform: translateY(-2px);
  outline: none;
}

.contact-ctas { margin-top:12px; display:flex; gap:12px; align-items:center; }
.contact-ctas .btn { padding: 12px 18px; border-radius:8px; font-size:1rem; }
.contact-ctas .btn.call-large { background: var(--primary-color); color:#fff; }
.contact-ctas .btn.whatsapp { background: #25D366; color:#fff; }

/* Add subtle yellow shadow to contact and map cards for emphasis */
.contact-info { border: 1px solid rgba(11,35,64,0.04); }
.map { border: 1px solid rgba(11,35,64,0.04); }

/* Icon spacing for CTA buttons (slightly larger for improved visibility) */
.contact-ctas .btn i { margin-right: 14px; vertical-align: middle; color: inherit; font-size: 1.4rem; }
.contact-ctas .btn svg { margin-right: 14px; vertical-align: middle; color: inherit; width: 24px; height: 24px; fill: currentColor; }

/* Map column: make visually balanced */
.map { background:#fff; padding:12px; border-radius:8px; box-shadow: 0 8px 20px rgba(0,0,0,0.05); display:flex; flex-direction:column; }
.map h2 { margin-top:0; }
.map iframe { border-radius:6px; width:100%; height:100%; min-height:380px; }

/* Clickable overlay to open full Google Maps (so address is visible on click) */
.map { position: relative; }
.map-overlay { position: absolute; inset: 0; z-index: 4; display:block; background: transparent; }
.map-overlay::after { content: ""; position:absolute; right:12px; top:12px; background: rgba(255,255,255,0.9); color: #111; padding:6px 10px; border-radius:6px; font-weight:700; font-size:0.85rem; }
.map-overlay[aria-label]::after { content: attr(aria-label); }

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; }
  .map iframe { min-height:300px; }
}

/* Team */
.team { display:flex; gap:12px; flex-wrap:wrap; }
.team-member { text-align:center; }
.team-member img { width:120px; height:120px; object-fit:cover; border-radius:8px; }

/* WhatsApp sabit buton */
.whatsapp-fixed { position:fixed; right:20px; bottom:20px; background:#25D366; width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; box-shadow:0 8px 20px rgba(0,0,0,0.15); z-index:2000; transition: transform .18s; }
.whatsapp-fixed:hover { transform: translateY(-4px); }

/* Homepage: sol alt köşede yazi + ikonlu WhatsApp butonu */
.whatsapp-fixed-left {
  position: fixed;
  right: 20px; /* moved to right-bottom as requested */
  bottom: 20px;
  background: #25D366;
  color: #fff;
  padding: 12px 16px;
  border-radius: 30px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  z-index: 2000;
  transition: transform .18s, opacity .18s;
}
.whatsapp-fixed-left i { font-size: 22px; color: #fff; }
.whatsapp-fixed-left .wa-text { display: inline-flex; align-items: center; gap: 10px; font-size: 1rem; }
.whatsapp-fixed-left .wa-text .wa-inline { font-size: 22px; line-height: 1; }

/* Yanıp sönen (blink) animasyon - tercihe bağlı olarak azaltılmış hareket desteği */
@keyframes wa-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }
/* animate only the label text so the WA icon stays static */
.whatsapp-fixed-left .wa-label { animation: wa-blink 1.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .whatsapp-fixed-left .wa-label { animation: none; }
}
.whatsapp-fixed-left:hover { transform: translateY(-4px); }

@media (max-width:420px) {
  .whatsapp-fixed-left { padding: 8px 10px; border-radius: 22px; }
  .whatsapp-fixed-left .wa-label { display:none; }
}

/* Extra mobile tuning for very small devices: reduce hero further and avoid CTA overlap */
@media (max-width:360px) {
  .hero { min-height: 300px; padding: 40px 10px; }
  .hero h1 { font-size: 1.4rem; }
  .lead { font-size: 0.95rem; }
  .hero-buttons .btn { max-width: 100%; padding: 10px 12px; }
  /* stack fixed CTAs tighter and ensure they don't obscure main content */
  .whatsapp-fixed-left { right: 10px; bottom: 12px; padding: 8px 10px; border-radius: 20px; }
  .call-fixed-left { right: 10px; bottom: 64px; padding: 8px 10px; border-radius: 20px; }
  .call-fixed-left .call-label, .whatsapp-fixed-left .wa-label { display: none; }
}

/* Call fixed button (stacked above WhatsApp) */
.call-fixed-left {
  position: fixed;
  right: 20px; /* moved to right-bottom and stacked above whatsapp */
  bottom: 86px; /* sits above whatsapp (which is at bottom:20px) */
  background: var(--secondary-color);
  color: #000;
  padding: 12px 16px;
  border-radius: 30px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  z-index: 2000;
  transition: transform .18s, opacity .18s;
}
.call-fixed-left i { font-size: 22px; color: inherit; }
.call-fixed-left .call-text { display: inline-flex; align-items:center; gap:8px; font-size:1rem; }
/* animate only the label so icon remains static */
.call-fixed-left .call-label { animation: call-blink 1.2s ease-in-out infinite; }

@keyframes call-blink { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }

@media (max-width:420px) {
  .call-fixed-left { padding: 10px 12px; border-radius: 22px; bottom: 72px; }
  /* hide only textual label on very small screens */
  .call-fixed-left .call-label { display: none; }
}

/* Header call button blink when triggered via JS. Uses existing call-blink keyframes but limits iterations. */
.call-btn.blink { animation: call-blink 1.2s ease-in-out infinite; }
.call-btn.blink:focus { outline: none; }

/* Small phone icon inserted via JS when missing */
.phone-icon { width: 18px; height: 18px; vertical-align: middle; margin-right: 8px; fill: currentColor; }

@media (prefers-reduced-motion: reduce) {
  .call-btn.blink { animation: none; }
}

/* Ensure the SVG icons in the fixed bottom-right CTAs remain static even when the
   surrounding text is animated. This prevents the icon from blinking with the text. */
.call-fixed-left .call-text svg,
.whatsapp-fixed-left .wa-text svg {
  animation: none !important;
  opacity: 1 !important;
}

/* Sticky header state */
header.sticky { background: rgba(10,14,60,0.95); box-shadow: 0 6px 18px rgba(0,0,0,0.12); }

/* Animasyonlar */
.fade-in { animation: fadeIn .5s ease both; }
@keyframes fadeIn { from { opacity:0; transform: translateY(6px); } to { opacity:1; transform:none; } }

/* Form error */
.error { outline: 2px solid var(--secondary-color); }

/* Lazy-load görsel tamamlandığında sınıf eklenmesi için */
img[loading="lazy"] { filter: blur(0.6px); transition: filter .45s; }
img.loaded { filter: none; }

/* Lightbox / fullscreen gallery viewer */
.lightbox { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,0.85); z-index: 3000; }
.lightbox[aria-hidden="false"] { display:flex; }
.lb-viewport { max-width: 92%; max-height: 86%; position: relative; display:flex; align-items:center; justify-content:center; }
.lb-image { max-width: 100%; max-height: 100%; border-radius:6px; box-shadow: 0 12px 40px rgba(0,0,0,0.6); display:block; }
.lb-caption {
  margin-top:12px;
  color:#fff;
  text-align:center;
  font-weight:600;
  opacity:0.95;
  display:block !important;
  background: rgba(0,0,0,0.45);
  padding: 8px 12px;
  border-radius: 6px;
  max-width: 95%;
  margin-left: auto;
  margin-right: auto;
}
.lb-close, .lb-prev, .lb-next { position: absolute; background: transparent; border:0; color:#fff; font-size:32px; cursor:pointer; padding:12px; transition: transform .12s ease; }
.lb-close { right: 18px; top: 12px; font-size:36px; }
.lb-prev { left: 12px; top: 50%; transform: translateY(-50%); font-size:44px; }
.lb-next { right: 12px; top: 50%; transform: translateY(-50%); font-size:44px; }
.lb-close:focus, .lb-prev:focus, .lb-next:focus { outline: 3px solid rgba(255,255,255,0.12); border-radius:6px; }
.lb-prev:hover, .lb-next:hover, .lb-close:hover { transform: scale(1.06); }

/* prevent background scrolling when modal is open */
body.modal-open { overflow: hidden; height: 100%; }

/* Mobile tweaks: slightly smaller controls */
@media (max-width: 700px) {
  .lb-prev, .lb-next { font-size: 36px; padding:10px; }
  .lb-close { font-size:28px; }
}

/* Image transition animations for lightbox */
.lb-image { transition: transform .26s cubic-bezier(.22,.9,.32,1), opacity .2s ease; will-change: transform, opacity; }
.anim-out-left { transform: translateX(-10%) scale(.98); opacity: 0; }
.anim-out-right { transform: translateX(10%) scale(.98); opacity: 0; }
.anim-in-left { transform: translateX(0%); opacity: 1; }
.anim-in-right { transform: translateX(0%); opacity: 1; }

/* Gallery intro paragraph style */
.gallery-intro { max-width: 880px; margin: 8px auto 18px; text-align: center; color: #333; font-size: 1.05rem; }

/* Responsive */
@media (max-width: 900px) {
  .gallery-grid { grid-template-columns: repeat(2,1fr); }
  .contact-grid { grid-template-columns: 1fr; }
  .machine-grid { grid-template-columns: 1fr; }
}
@media (min-width: 1200px) {
  /* slightly taller thumbs on very wide screens while keeping density */
  .gallery-item img { aspect-ratio: 4/3; }
}
@media (max-width: 700px) {
  .gallery-item img { aspect-ratio: 16/9; }
}
@media (max-width: 700px) {
  nav ul { display: none; }
  #mobile-menu-toggle { display: inline-block; }
  .call-btn { display: none; }
  .hero { padding: 56px 12px; }
  .hero h1 { font-size: 1.6rem; }
  .service-cards { flex-direction: column; align-items: center; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
  .cta-strip .container { flex-direction: column; align-items: stretch; }
}

/* Mobile improvements */
@media (max-width: 700px) {
  /* reduce hero min-height on smaller screens to avoid huge vertical space */
  .hero { min-height: 360px; padding: 48px 14px; }
}
@media (max-width: 420px) {
  .hero { min-height: 260px; padding: 36px 12px; }
  /* stack/compact fixed CTAs to avoid covering page controls */
  .whatsapp-fixed-left { right: 12px; bottom: 12px; padding: 8px 10px; border-radius:22px; }
  .call-fixed-left { right: 12px; bottom: 72px; padding: 8px 10px; border-radius:22px; }
}

/* Mobile nav dropdown styling (JS toggles display inline) */
@media (max-width: 700px) {
  nav { position: relative; }
  nav ul {
    display: none; /* default hidden on small screens; JS toggles .open class */
    position: absolute;
    right: 12px;
    top: 64px;
    background: rgba(10,14,60,0.98);
    padding: 10px;
    border-radius: 8px;
    flex-direction: column;
    gap: 8px;
    min-width: 160px;
    z-index: 1500;
  }
  nav ul.open { display: flex; }
  nav ul li a { color: #fff; display:block; padding:10px 12px; }
}

/* Contact page moved styles (previously page-scoped in contact.html) */
.contact-page .container{max-width:1100px;margin:0 auto;padding:20px}
.contact-grid{display:grid;grid-template-columns:46% 54%;gap:24px;align-items:stretch}
.contact-info{background:#fff;padding:20px;border-radius:10px;box-shadow:0 8px 20px rgba(11,35,64,0.06);display:flex;flex-direction:column}
.contact-info .intro{color:#374151;margin:0 0 12px;line-height:1.6}
.contact-items p{margin:10px 0}
.contact-ctas{margin-top:auto;display:flex;gap:10px}
.map{background:#fff;padding:12px;border-radius:10px;box-shadow:0 8px 20px rgba(11,35,64,0.06);display:flex;flex-direction:column}
.map iframe{flex:1;min-height:360px;height:100%;border:0}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}.map iframe{height:320px}}

/* Contact page: make phone/whatsapp links gently blink to increase visibility */
.contact-items .contact-item.phone a,
.contact-items .contact-item.whatsapp a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
}
.contact-items .contact-item.phone a { animation: call-blink 1.2s ease-in-out infinite; }
.contact-items .contact-item.whatsapp a { animation: wa-blink 1.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .contact-items .contact-item.phone a,
  .contact-items .contact-item.whatsapp a { animation: none !important; }
}



/* Footer phone highlight (yellow glow behind phone number) */
.footer-right a[href^="tel"]{
  position: relative;
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  color: inherit;
  font-weight: 700;
  text-decoration: none;
  background: linear-gradient(180deg, rgba(255,245,200,0.04), rgba(255,235,150,0.02));
  box-shadow: 0 8px 28px rgba(255,200,0,0.08);
  transition: box-shadow .18s, transform .12s;
}
.footer-right a[href^="tel"]:hover{ box-shadow: 0 12px 40px rgba(255,210,0,0.12); transform: translateY(-2px); }

/* Icon utilities: make inline icons larger and bolder for contact and nav */
.ci-icon { display:inline-flex; width:28px; height:28px; margin-right:10px; align-items:center; justify-content:center; vertical-align:middle; color:var(--primary-color); }
.contact-item.phone .ci-icon { color: var(--primary-color); }
.contact-item.whatsapp .ci-icon { color: #075E54; /* darker WhatsApp green for better contrast */ }
.contact-item.email .ci-icon { color: #0b2340; }
.ci-icon svg { width:24px; height:24px; fill:currentColor; stroke:none; stroke-width:0; shape-rendering:geometricPrecision; }

.nav-icon { display:inline-flex; width:20px; height:20px; margin-right:8px; align-items:center; justify-content:center; vertical-align:middle; color:inherit; }
nav ul li a .nav-icon svg { width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:2; }

/* Ensure fixed CTA icons are visible and slightly larger */
.whatsapp-fixed-left svg, .call-fixed-left svg, .whatsapp-fixed svg { width:22px; height:22px; }

/* ------------------------------------------------------------------
   Üçlü Vurgu Bloğu - Highlights (index.html için)
   Minimal, profesyonel; large-number, bold title, kısa açıklama.
   Responsive: 3 kolon > 1 kolon (mobile)
   ------------------------------------------------------------------ */
:root{
  --hl-bg: #ffffff;
  --hl-accent: #1976d2;
  --hl-accent-2: #ffb300;
  --hl-muted: rgba(10, 24, 48, 0.08);
  --hl-text: #0b2340;
  --hl-secondary: #55617a;
  --container-max: 1100px;
}

.highlights {
  padding: 56px 16px;
  background: transparent;
  color: var(--hl-text);
}

.highlights .container {
  max-width: var(--container-max);
  margin: 0 auto;
}

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

.highlight {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(250,250,252,0.98) 100%);
  border-radius: 12px;
  padding: 28px;
  box-shadow: 0 6px 18px rgba(15,30,60,0.06);
  transition: transform .22s ease, box-shadow .22s ease;
  position: relative;
  overflow: hidden;
  min-height: 160px;
  border-left: 4px solid rgba(25,118,210,0.08);
}

.highlight:hover,
.highlight:focus-within,
.highlight:focus {
  transform: translateY(-6px);
  box-shadow: 0 14px 32px rgba(15,30,60,0.12);
  border-left-color: var(--hl-accent);
  outline: none;
}

.num {
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  font-weight: 800;
  font-size: 64px;
  line-height: 1;
  color: var(--hl-muted);
  opacity: 0.16;
  display: block;
  min-width: 76px;
  text-align: left;
  padding-top: 4px;
}

.content {
  flex: 1 1 auto;
}

.content h3 {
  margin: 0 0 8px 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--hl-text);
  letter-spacing: -0.2px;
}

.content p {
  margin: 0;
  color: var(--hl-secondary);
  line-height: 1.6;
  font-size: 0.96rem;
}

.highlight::after{
  content: "";
  position: absolute;
  right: -40%;
  top: -40%;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle at 30% 30%, rgba(255,179,0,0.06), transparent 40%),
              radial-gradient(circle at 70% 70%, rgba(25,118,210,0.04), transparent 45%);
  transform: rotate(12deg);
  pointer-events: none;
}

.sr-only {
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* Skip link (görünmez, klavye ile odağa gelince görünür) */
.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip-link:focus,
.skip-link:active,
.sr-only-focusable:active,
.sr-only-focusable:focus {
  position: fixed;
  left: 16px;
  top: 12px;
  width: auto;
  height: auto;
  padding: 8px 12px;
  background: #fff;
  color: var(--primary-color);
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  z-index: 4000;
}

@media (max-width: 980px) {
  .highlights {
    padding: 40px 12px;
  }
  .highlights-grid {
    grid-template-columns: 1fr;
  }
  .highlight {
    flex-direction: row;
    padding: 20px;
  }
  .num {
    font-size: 48px;
    min-width: 62px;
    opacity: 0.12;
  }
}

@media (max-width: 520px) {
  .highlight {
    flex-direction: column;
    gap: 12px;
  }
  .num {
    font-size: 40px;
    min-width: auto;
  }
  .content h3 { font-size: 1.02rem; }
  .content p { font-size: 0.95rem; }
}

/* Section title above highlights */
.section-title {
  text-align: center;
  font-size: 1.5rem;
  color: var(--primary-color);
  margin: 0 0 18px;
  font-weight: 700;
}

/* Blink animation for important CTAs (respect prefers-reduced-motion) */
@keyframes blink-cta { 0%,100% { opacity: 1; } 50% { opacity: 0.18; } }
.blink { animation: blink-cta 1.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .blink { animation: none !important; } }

/* small icon next to highlight titles */
.hl-icon { display: inline-block; width: 36px; height: 36px; margin-right: 12px; vertical-align: middle; color: var(--hl-accent); }
.highlight .content h3 { display: inline-block; vertical-align: middle; margin: 0; }

/* hide overlay text on thumbnails (we removed markup but keep safe rule) */
.gallery-item .overlay, .gallery-thumb .overlay { display: none !important; }

/* hide lightbox captions so only arrows are visible during image navigation */
.lightbox .lb-caption { display: none !important; }


/* ------------------------------
   About page specific styles
   (moved from page-scoped <style> in about.html)
   These use about-prefixed CSS variables to avoid colliding
   with the global theme variables defined earlier.
   ------------------------------ */
:root{
  --about-accent:#0D47A1; /* deep blue */
  --about-accent-2:#FFB300; /* warm yellow */
  --about-muted:#6b7280;
  --about-card-bg:#ffffff;
  --about-surface: #f7f9fc;
  --about-shadow: 0 8px 20px rgba(11,35,64,0.08);
  --about-radius:12px;
  --about-container:1200px;
}

.about-hero{background:linear-gradient(180deg,rgba(13,71,161,0.06),transparent);padding:48px 0 24px}
.about-hero .container{max-width:var(--about-container);margin:0 auto}
.about-hero h1{font-size:2.1rem;margin:0 0 8px}
.about-hero p.lead{color:var(--about-muted);margin:0 0 0.25rem;line-height:1.6}

.center{text-align:center}

/* Mission / Vision cards */
.mv-row{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:28px auto 40px;align-items:stretch}
.mv-card{background:var(--about-card-bg);padding:22px;border-radius:var(--about-radius);box-shadow:var(--about-shadow);min-height:180px}
.mv-card h3{margin:0 0 8px;color:var(--about-accent)}
.mv-card p{color:var(--about-muted);margin:0}

/* About-specific highlights (Neden bizi tercih etmelisiniz) */
.about-highlights{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:16px 0 36px}
.about-hl-card{background:linear-gradient(180deg,#fff, #fbfdff);padding:18px;border-radius:10px;text-align:center;box-shadow:0 6px 16px rgba(11,35,64,0.06)}
.about-hl-icon{display:inline-flex;width:56px;height:56px;border-radius:10px;background:linear-gradient(135deg,var(--about-accent),var(--about-accent-2));color:#fff;margin-bottom:10px;align-items:center;justify-content:center}
.about-hl-card h4{font-size:1rem;margin:8px 0 6px}
.about-hl-card p{font-size:0.92rem;color:var(--about-muted);margin:0}

/* Team & responsive tweaks used on about page */
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:40px}
.team-card{background:var(--about-card-bg);padding:14px;border-radius:12px;text-align:center;box-shadow:var(--about-shadow)}
.team-card img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;object-position:top center;border-radius:8px;margin-bottom:12px}
.team-card h4{margin:6px 0 2px;font-size:1rem}
.team-card p{margin:0;color:var(--about-muted);font-size:0.92rem}

@media (max-width:900px){.mv-row{grid-template-columns:1fr}.about-highlights{grid-template-columns:repeat(2,1fr)}.team-grid{grid-template-columns:repeat(1,1fr)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}