/* Global styles for Car Kiralama - modern, animated UI */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&display=swap');

:root{
  --bg:#f5f7fa;
  --card:#ffffff;
  --primary:#1f8f4a; /* slightly richer green */
  --primary-contrast:#ffffff;
  --muted:#6c757d;
  --dark:#0b1220;
  --accent:#17a2b8;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background:var(--bg, #f5f7fa);
  color:#1f2937;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  /* Reserve space for fixed header (match header height to avoid visible gap) */
  padding-top: 108px;
}
/* Reserve space for fixed footer so content isn't overlapped */
/* removed global bottom padding so footer stays in document flow */
/* body padding removed to keep footer at page bottom (not fixed) */

/* Navbar */
.navbar{
  background: var(--header-footer) !important;
  box-shadow: 0 6px 30px rgba(15,20,24,0.12);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  padding-top: 18px;
  padding-bottom: 18px;
  /* Ensure navbar is fixed at the top of the viewport across the site
     layout.ejs already applies the `fixed-top` class, but enforce here to
     avoid inconsistencies and make sure z-index is high enough for video
     hero backgrounds. */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1060; /* slightly above Bootstrap's fixed navbar default */
}
.navbar .navbar-brand{font-weight:700}
.navbar .navbar-brand img{height:72px; object-fit:contain}
.navbar .nav-link{
  color:rgba(255,255,255,0.95) !important;
  transition: color 0.3s ease;
}
.navbar .nav-link:hover{
  color: var(--primary) !important;
}

/* Theme toggle removed - styles cleared */

/* Hero */
.hero-section{
  background: linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.35)), url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 600"><rect fill="%23228B22" width="1200" height="600"/><polygon fill="%234169E1" points="0,600 400,200 800,400 1200,100 1200,600"/></svg>');
  background-size:cover;
  background-position:center;
  color:white;
  /* Use 600px to match araclar page; body padding-top handles header spacing */
  height: 600px;           /* Desktop banner fixed height (match araclar) */
  min-height: 420px;       /* Prevent collapsing on small content */
  display:flex;            /* center content vertically */
  align-items:center;
  justify-content:center;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.hero-section .display-4{font-weight:800; letter-spacing: -0.02em}
.hero-section .lead{opacity:0.95}
.hero-section .btn{min-width:220px}

/* Subtle floating animation for hero button */
@keyframes floatUpDown{
  0%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
  100%{transform:translateY(0)}
}
.hero-section .btn{animation: floatUpDown 3.5s ease-in-out infinite}

/* Cards */
.card{
  border:0;
  border-radius:14px;
  background:var(--card);
  transition: transform 220ms ease, box-shadow 220ms ease;
}
.card:hover{
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(12,20,60,0.08);
}
.card .card-img-top{border-top-left-radius:14px;border-top-right-radius:14px}

/* Car card specifics */
.car-card .card-body{display:flex;flex-direction:column}
.car-card .card-title{font-weight:700}
.car-card .card-text{color:var(--muted)}

/* Nice price tag */
.price-badge{color:var(--primary); font-weight:700}

/* Subtle fade-in for sections */
.fade-in{opacity:0; transform: translateY(6px); animation: fadeInUp 600ms forwards}
@keyframes fadeInUp{to{opacity:1; transform:none}}

/* Footer */
.site-footer{
  background: var(--header-footer);
  color: #ffffff;
  padding:28px 0;
  border-top:1px solid rgba(255,255,255,0.03);
}

/* Footer styles (dark, modern) */
.site-footer .footer-top{background: linear-gradient(0deg, rgba(0,0,0,0.08), rgba(0,0,0,0.04)); padding-top:40px; padding-bottom:30px}
.site-footer .footer-logo{max-width:220px; height:auto}
.site-footer .footer-desc{color:rgba(255,255,255,0.92); max-width:520px}
.site-footer .footer-heading{color:#ffffff; font-weight:700; margin-bottom:14px; position:relative; display:inline-block}
.site-footer .footer-heading::after{ content:''; display:block; height:2px; width:44px; background: rgba(255,255,255,0.12); margin-top:8px}
.site-footer .footer-links a{color:rgba(255,255,255,0.9); text-decoration:none}
.site-footer .footer-links a:hover{color:var(--primary)}
.site-footer .social-icon{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,0.04);color:#fff;margin-left:8px;text-decoration:none}
.site-footer .footer-bottom{background:transparent}
.site-footer .copyright{color:rgba(255,255,255,0.6)}

/* Contact badge style used in footer contact list */
.site-footer .contact-badge{
  width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; background:#fff; color:var(--header-footer); border-radius:8px; box-shadow: 0 8px 20px rgba(2,6,23,0.14); margin-right:12px; font-size:16px;
}
.site-footer .contact-item .text-white, .site-footer .contact-item a{color:rgba(255,255,255,0.95)}

/* Make footer layout more compact on desktop */
@media (min-width:768px){
  .site-footer .footer-top .col-md-6{padding-right:60px}
  .site-footer .footer-top .col-md-3{padding-left:20px}
}

/* Thin top border above copyright to match screenshot */
.site-footer .footer-bottom{border-top:1px solid rgba(255,255,255,0.06); padding-top:18px; padding-bottom:18px}

/* About page: make footer full-bleed (edge-to-edge) but only for About page */
.about-footer-wide .site-footer{
  position:relative;
  left:50%;
  right:50%;
  margin-left:-50vw;
  margin-right:-50vw;
  width:100vw;
  padding-top:48px;
  padding-bottom:28px;
}
.about-footer-wide .site-footer .footer-top .container{
  max-width:1100px; /* keep content width consistent with site */
}

@media (max-width:767px){
  .about-footer-wide .site-footer{padding-top:32px; padding-bottom:20px}
}

/* Ensure About page footer sits at the bottom of the viewport when content is short */
.about-footer-wide{
  display:flex;
  flex-direction:column;
  min-height:100vh;
}
.about-footer-wide .about-content{
  flex:1 0 auto; /* allow content to grow and push footer to bottom */
}

/* Ensure the footer is pushed to the bottom when body is a column flex container
   This uses margin-top:auto on the footer to consume remaining space and remove
   any visual gap under the footer on the About page. */
.about-footer-wide .site-footer{
  margin-top: auto;
}

/* When JS determines the page content is shorter than the viewport,
   add `.footer-fixed` to the body to pin the footer to the bottom.
   This prevents overlaying content by adding equivalent bottom padding
   to the main content via inline style from JS (see about.ejs). */
.about-footer-wide.footer-fixed .site-footer{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  z-index: 50;
}

.about-footer-wide.footer-fixed .site-footer .footer-top,
.about-footer-wide.footer-fixed .site-footer .footer-bottom{
  background: var(--header-footer);
}



/* Floating WhatsApp button */
.whatsapp-float{position:fixed; left:20px; bottom:20px; width:64px; height:64px; border-radius:50%; background:#25D366; color:#ffffff; display:flex; align-items:center; justify-content:center; text-decoration:none; box-shadow: 0 12px 36px rgba(37,211,102,0.18); z-index:9999; transition:transform 180ms ease, box-shadow 180ms ease}
.whatsapp-float i{font-size:22px}
.whatsapp-float:hover{transform: translateY(-6px); box-shadow: 0 20px 48px rgba(37,211,102,0.24)}

@keyframes whatsapp-bob{0%{transform:translateY(0)}50%{transform:translateY(-6px)}100%{transform:translateY(0)}}
.whatsapp-float{animation: whatsapp-bob 3.2s ease-in-out infinite}

@media (min-width:768px){
  .whatsapp-float{display:none !important}
}

.scroll-top-btn{position:fixed; right:20px; bottom:20px; width:64px; height:64px; border-radius:50%; border:none; background:#0f172a; color:#ffffff; display:flex; align-items:center; justify-content:center; box-shadow:0 12px 36px rgba(15,23,42,0.32); cursor:pointer; z-index:9999; opacity:0; visibility:hidden; transform:translateY(12px); transition:opacity 180ms ease, transform 180ms ease, box-shadow 180ms ease}
.scroll-top-btn i{font-size:20px}
.scroll-top-btn:hover{box-shadow:0 20px 48px rgba(15,23,42,0.4)}
.scroll-top-btn.is-visible{opacity:1; visibility:visible; transform:translateY(0)}

/* Standard green WhatsApp button used inside pages (CTA buttons) */
.whatsapp-btn{
  background-color: #25D366 !important;
  border-color: #25D366 !important;
  color: #ffffff !important;
}
.whatsapp-btn:hover{
  background-color: #128C7E !important;
  border-color: #128C7E !important;
}

@media (max-width:767px){
  .whatsapp-float{left:14px; bottom:14px; width:56px; height:56px}
  .scroll-top-btn{right:14px; bottom:14px; width:56px; height:56px}
}
.site-footer a{color:inherit}
.site-footer .small-muted{color:#9aa4b2}

/* Utility: fixed footer class */
.fixed-footer{position:fixed; bottom:0; left:0; width:100%; z-index:999}

/* Responsive tweaks */
@media (max-width:767px){
  .hero-section{height:360px; padding:20px 0}
  .hero-section .display-4{font-size:28px}
  /* slightly smaller/taller mobile header compensation */
  /* Reduced top padding to better match the actual fixed header height on mobile and remove visual gap */
  body{ padding-top: 72px; }
  .navbar .navbar-brand img{height:56px}
}

@media (min-width:768px) and (max-width:991px){
  /* medium screens */
  body{ padding-top: 108px; }
  .hero-section{height:480px}
  .navbar .navbar-brand img{height:64px}
}

/* Buttons */
.btn-primary{
  background: linear-gradient(90deg, var(--primary), #1a7a3e);
  border: none;
  transition: transform 160ms ease, box-shadow 160ms ease;
  color: var(--primary-contrast);
}
.btn-primary:hover{transform:translateY(-3px); box-shadow: 0 12px 40px rgba(31,143,74,0.12)}

/* Hero CTA styling */
.hero-cta{display:inline-flex;align-items:center;gap:14px;padding:14px 30px;border-radius:12px;font-weight:800;font-size:1.06rem}
/* Higher contrast CTA: solid primary gradient, white text, white icon circle with primary glyph */
.hero-cta.btn-cta,
.btn-cta.hero-cta{
  background: linear-gradient(90deg, var(--primary, #1f8f4a), #166936) !important;
  color: #ffffff !important;
  border: 0 !important;
  box-shadow: 0 14px 40px rgba(15,40,20,0.18) !important;
  padding: 12px 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 14px !important;
  text-decoration: none !important;
  transition: transform 180ms ease, box-shadow 180ms ease !important;
}
.hero-cta.btn-cta .btn-text, .btn-cta.hero-cta .btn-text{color: #fff !important; font-weight:700}
.hero-cta .btn-icon{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:10px;background:#ffffff;color:var(--primary) !important; box-shadow: 0 6px 18px rgba(8,20,10,0.08)}
.hero-cta .btn-icon i{font-size:18px}
.btn-cta:hover{transform: translateY(-5px); box-shadow: 0 22px 56px rgba(15,40,20,0.22) !important}
.btn-cta:focus{outline: 3px solid rgba(255,255,255,0.12);outline-offset:3px}

/* Accent color (Renk 2) usage for outline/secondary buttons */
.btn-outline-primary{
  color: var(--accent) !important;
  border-color: var(--accent) !important;
}
.btn-outline-primary:hover{
  background: var(--accent) !important;
  color: #fff !important;
}

/* Blue variant for homepage CTA */
.hero-cta.btn-cta.btn-cta--blue,
.btn-cta.btn-cta--blue {
  background: linear-gradient(90deg, #0066ff, #0052cc) !important;
  box-shadow: 0 16px 44px rgba(0,102,255,0.24) !important;
  color: #fff !important;
}
.hero-cta.btn-cta.btn-cta--blue .btn-icon,
.btn-cta.btn-cta--blue .btn-icon{
  background:#ffffff;
  color:#0066ff !important;
  box-shadow: 0 8px 24px rgba(0,102,255,0.16) !important;
}
.hero-cta.btn-cta.btn-cta--blue:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 20px 48px rgba(0,102,255,0.28) !important;
}
.hero-cta.btn-cta.btn-cta--blue:active {
  transform: translateY(-2px) !important;
}

/* Small helpers */
.text-muted-2{color:#6b7280}

/* Adjust spacing for About page CTA so it doesn't run into the FAQ accordion */
.about-cta-spacer{margin-top:48px}
@media (max-width:767px){
  .about-cta-spacer{margin-top:28px}
}

/* About page flow improvements */
.about-content{max-width:1100px;margin-left:auto;margin-right:auto}
.about-content .lead{font-size:1.05rem;color:#374151}
.about-intro img{width:100%;height:100%;object-fit:cover;border-radius:8px;display:block}
.about-intro .ratio{height:100%;min-height:220px}
.about-image-large{overflow:hidden;border-radius:10px}
@media (min-width:992px){
  .about-image-large{min-height:420px}
}
@media (max-width:991px){
  .about-image-large{min-height:260px}
}
.about-section{padding-top:36px;padding-bottom:36px}
.about-section h4{font-weight:700;margin-bottom:18px}
.about-summary{max-width:860px;margin-left:auto;margin-right:auto;color:#475569}

/* Smooth images */
img{max-width:100%; height:auto}

/* Nice badges */
.badge-custom{background:linear-gradient(90deg,var(--primary), #0b5ed7); color:#fff}

/* Accessibility: focus states */
:focus{outline:2px solid rgba(13,110,253,0.18); outline-offset:2px}

/* Full-bleed map section used on contact page */
.map-fullwidth{
  width:100vw;
  position:relative;
  left:50%;
  right:50%;
  margin-left:-50vw;
  margin-right:-50vw;
  background:#fff;
  box-shadow: 0 10px 36px rgba(15,23,42,0.06);
  border-radius:10px;
  overflow:hidden;
}
.map-fullwidth .map-inner{width:100%; height:72vh}
.map-iframe{width:100%; height:100%; border:0; display:block}

@media (max-width:768px){
  .map-fullwidth .map-inner{height:56vh}
}

/* About page specific title/text colors */
.about-biz-title{color:#000 !important}
.about-biz-text{color:#000 !important; line-height:1.66}

/* Ensure footer brand/logo always aligns left on all pages */
/* footer alignment reverted to default — no forced left alignment */

/* Footer layout: ensure logo sits at top-left of the description block */
/* footer layout customizations removed — reverted to previous styles */