/* Reset and base */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Segoe UI, Roboto, Arial, sans-serif;color:#222}
.container{width:1200px;max-width:95%;margin:0 auto}

/* Topbar */
.topbar{background:#221a1a;color:#fff;font-size:14px}
.topbar-inner{display:flex;justify-content:space-between;align-items:center;padding:8px 0}
.topbar .contacts{opacity:0.95}
.topbar .contacts .sep{margin:0 8px;color:#777}
.topbar .socials a{color:#fff;text-decoration:none;margin-left:10px;font-weight:600}

/* Header */
.site-header{position:fixed;left:0;right:0;top:40px;z-index:60;background:rgba(0,0,0,0.14);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);box-shadow:0 2px 10px rgba(0,0,0,0.06)}
.header-inner{display:flex;align-items:center;justify-content:flex-start;padding:18px 20px}
.header-inner{position:relative}
.brand .logo{height:48px}
.main-nav{margin-left:auto}

/* Ensure the nav stays clear of the centered social icons on wide screens.
   This shifts the whole nav a little to the right so it won't overlap the centered icons. */
@media (min-width:1100px){
  .main-nav{transform:translateX(72px)}
}

/* Slightly smaller offset for mid-width screens */
@media (min-width:900px) and (max-width:1099px){
  .main-nav{transform:translateX(46px)}
}
.main-nav ul{list-style:none;display:flex;gap:28px;margin:0;padding:0}
.main-nav a{color:#fff;text-decoration:none;font-weight:600;letter-spacing:1px}
.main-nav a.active{color:#00a8e8}
.nav-toggle{display:none;background:transparent;border:0;color:#fff;font-size:26px}

/* Centered social icons in header */
.header-socials{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;gap:10px;z-index:65}

/* Move social icons into the empty area of the header image on wide/mid screens.
   We position them relative to the centered container by offsetting from 50%.
   Mobile behaviour is unchanged (position:static via existing media query). */
@media (min-width:1400px){
  .header-socials{left:calc(50% - 320px);transform:translateY(-50%)}
}
@media (min-width:1100px) and (max-width:1399px){
  .header-socials{left:calc(50% - 260px);transform:translateY(-50%)}
}
@media (min-width:900px) and (max-width:1099px){
  .header-socials{left:calc(50% - 200px);transform:translateY(-50%)}
}
.header-socials .social-link{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:transparent;border:1px solid rgba(255,255,255,0.12);color:#fff;text-decoration:none;transition:all .18s}
.header-socials .social-link svg{width:18px;height:18px;fill:#fff}
.header-socials .social-link:hover{background:rgba(255,255,255,0.06);transform:translateY(-2px);border-color:rgba(255,255,255,0.22)}

/* Small screens: move centered socials to left of toggle for space */
@media (max-width:900px){
  .header-socials{position:static;transform:none;margin-left:12px}
  .header-inner{gap:8px}
}

/* Hero */
.hero{position:relative;min-height:80vh;display:flex;align-items:flex-start}
/* Hero background helper: make any hero-bg fill the whole hero area */
.hero-bg{position:absolute;inset:0;z-index:0;background-position:center center;background-size:cover;background-repeat:no-repeat}
.hero-slides{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-slide{position:absolute;inset:0;background-position:center center;background-size:cover;filter:contrast(1) saturate(.95);opacity:0;transition:opacity .9s ease-in-out}
.hero-slide.visible{opacity:1}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg, rgba(20,20,20,0.45) 0%, rgba(20,20,20,0.2) 60%);z-index:1}
.hero-content{position:relative;z-index:2;padding:24px 0;display:flex;align-items:flex-start}
.hero-left{flex:1}
.hero-right{flex:1;display:flex;justify-content:flex-end;align-items:flex-end}
.hero-logo{height:72px}
.foreground-bike{max-width:56%;height:auto;transform:translateY(10%);box-shadow:0 12px 30px rgba(0,0,0,.4)}

/* Main sections */
.main-sections{padding:60px 0}
.main-sections section{padding:28px 0;border-bottom:1px solid #eee}

/* Page-specific hero */
.page-hero{background-position:center center;background-size:cover;min-height:260px;display:flex;align-items:center;color:#fff}
.page-hero-inner{width:100%;text-align:center;padding:48px 0}
.page-hero h1{font-size:44px;margin:0;font-weight:700;letter-spacing:2px}
.page-hero .accent{width:120px;height:6px;background:linear-gradient(90deg,#ffa500,#00a8e8);margin:12px auto;border-radius:3px}

/* Two-column section for servis */
.page-content{padding:60px 0}
.two-col{display:flex;gap:40px;align-items:flex-start}
.left-col{flex:1}
.right-col{flex:1;max-width:460px}
.gallery{background:#fff;padding:18px;border:1px solid #eee}
.gallery img{width:100%;display:block}
.dots{display:flex;gap:8px;justify-content:center;padding-top:12px}
.dot{width:10px;height:10px;border-radius:50%;background:#ddd;display:inline-block}
.dot.active{background:#00a8e8}
.section-title{color:#00a8e8;font-weight:700}
.service-list{list-style:none;padding:0;margin-top:16px}
.service-list li{padding:6px 0}

/* Zastupnistva */
.brand-grid .brands{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;list-style:none;padding:0;margin-top:14px}
.brand-grid .brands li{background:#f7f7f7;padding:10px;border-radius:6px;display:flex;align-items:center;gap:12px}
.brand-item{font-weight:700;color:#222}
.brand-logo{width:40px;height:40px;object-fit:contain;flex:0 0 40px}
@media (max-width:900px){
  .brand-grid .brands{grid-template-columns:repeat(2,1fr)}
  .brand-logo{width:34px;height:34px}
}
@media (max-width:480px){
  .brand-logo{width:28px;height:28px}
  .brand-item{font-size:14px}
}
.offer-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px;align-items:start}
.card{position:relative;background:#fff;padding:18px;border-radius:8px;border:1px solid #eee;box-shadow:0 6px 18px rgba(0,0,0,0.06);overflow:hidden;transition:transform .18s ease,box-shadow .18s ease}
.card:hover{transform:translateY(-6px);box-shadow:0 18px 36px rgba(0,0,0,0.12)}
.card img{width:100%;height:160px;object-fit:cover;border-radius:6px;margin-bottom:12px;display:block}
.card h4{margin:0 0 8px;font-size:18px;color:#222}
.card p{margin:0;color:#555}
.card .price{position:absolute;top:14px;right:14px;background:#0fa1c4;color:#fff;padding:8px 10px;border-radius:8px;font-weight:800;font-size:13px}

/* Sell form styling */
#sellForm{background:#fff;padding:20px;border-radius:10px;border:1px solid #eee;box-shadow:0 8px 20px rgba(0,0,0,0.04);max-width:980px}
#sellForm label{display:flex;flex-direction:column;font-size:14px;color:#222}
#sellForm input,#sellForm textarea{padding:10px;border:1px solid #e0e0e0;border-radius:8px;background:#fff}
#sellForm .row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:6px}
#sellForm .full{grid-column:1/-1}
#sellForm .note{font-size:13px;color:#666;margin:8px 0}
#sellForm .btn{display:inline-block;background:#00a8e8;color:#fff;padding:12px 18px;border-radius:8px;border:none;cursor:pointer;font-weight:800}

/* Small tweaks for listings block */
.offer-cards .badge{display:inline-block;background:#fff;padding:6px 8px;border-radius:6px;border:1px solid #eee;font-size:12px;margin-top:8px}

@media (max-width:900px){
  .offer-cards{grid-template-columns:repeat(2,1fr)}
  #sellForm .row{grid-template-columns:1fr}
}

@media (max-width:480px){
  .offer-cards{grid-template-columns:1fr}
  .card img{height:200px}
  #sellForm{padding:14px}
}

/* Kontakt */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;padding:30px 0}
.contact-info p{margin:8px 0}
.contact-form form{display:flex;flex-direction:column;gap:10px}
.contact-form label{display:block;font-size:14px}
.contact-form input,.contact-form textarea{width:100%;padding:8px;border:1px solid #ccc;border-radius:4px}
.btn{background:#00a8e8;color:#fff;border:0;padding:10px 14px;border-radius:5px;cursor:pointer}

/* Action buttons (kupite/prodajte) */
.action-buttons{display:inline-flex;gap:14px;align-items:center;justify-content:center}
.btn.btn-primary{background:#00a8e8;border:0;padding:12px 22px;border-radius:30px;font-weight:800}
.btn.btn-outline{background:transparent;border:2px solid rgba(15,161,196,0.12);color:#00a8e8;padding:10px 18px;border-radius:30px;font-weight:700}
.btn.btn-outline:hover{background:rgba(15,161,196,0.04)}

.contact-message{background:rgba(15,161,196,0.08);color:#0fa1c4;padding:10px;border-radius:6px;margin-bottom:8px;border:1px solid rgba(15,161,196,0.12)}

@media (max-width:900px){
  .two-col{flex-direction:column}
  .contact-grid{grid-template-columns:1fr}
  .brand-grid .brands{grid-template-columns:repeat(2,1fr)}
}

/* Footer */
.site-footer{background:#111;color:#ddd;padding:20px 0}
.footer-inner{display:flex;justify-content:space-between}

/* Large centered footer (matches provided screenshot) */
.site-footer.large{background:#231f20;color:#ddd;padding:60px 0 40px}
.site-footer.large .footer-top{max-width:420px;margin:0 auto;text-align:center}
.footer-logo{height:64px;margin-bottom:18px;display:block;margin-left:auto;margin-right:auto}
.site-footer .cta{display:inline-block;background:#0fa1c4;color:#fff;padding:12px 26px;border-radius:30px;font-weight:700;margin-bottom:22px;text-decoration:none}
.site-footer .footer-addr{color:#e6e6e6;font-size:15px;line-height:1.7;margin:18px 0}
.site-footer .footer-socials{display:flex;gap:12px;justify-content:center;margin-top:14px}
.site-footer .footer-socials a{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:transparent;border:1px solid rgba(255,255,255,0.08);color:#fff}
.site-footer .made-by{opacity:0.6;letter-spacing:2px;margin-top:20px;font-size:13px}

/* back-to-top floating */
.back-to-top{position:fixed;right:28px;bottom:28px;width:52px;height:52px;border-radius:50%;background:#0fa1c4;color:#fff;border:none;box-shadow:0 6px 18px rgba(0,0,0,.3);cursor:pointer;font-size:18px}

@media (max-width:900px){
  .site-footer.large{padding:40px 20px}
  .footer-logo{height:56px}
}

/* Responsive */
@media (max-width:900px){
  .container{max-width:96%}
  .main-nav{display:none}
  .nav-toggle{display:block}
  .hero-right{display:none}
  .site-header{top:36px}
}

@media (max-width:480px){
  .topbar-inner{font-size:13px}
  .hero{min-height:60vh}
}

/* Marketplace / listings styles for homepage */
.main-grid{display:grid;grid-template-columns:300px 1fr;gap:28px;align-items:start;padding:28px 0}
.sidebar{background:transparent;padding:10px}
.sidebar h4{margin:0 0 10px;color:#00a8e8}
.cat-list{list-style:none;padding:0;margin:0;max-height:480px;overflow:auto;border-right:0}
.cat-list li{padding:6px 8px;border-bottom:1px solid #f0f0f0;color:#333;font-size:14px}
.cat-list li span{color:#999;margin-left:8px}
.free-ad{display:block;margin-top:16px;background:#ffb03b;color:#fff;padding:10px 12px;text-align:center;border-radius:6px;text-decoration:none;font-weight:800}

.listings .listings-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.listings .listings-header h3{margin:0;color:#00a8e8}
.listings .show-all{color:#666;text-decoration:none;font-size:14px}

.listings-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.listing-card{background:#fff;border:1px solid #eee;border-radius:6px;overflow:hidden;box-shadow:0 6px 18px rgba(0,0,0,0.04);transition:transform .18s ease}
.listing-card:hover{transform:translateY(-6px)}
.listing-thumb{width:100%;height:120px;object-fit:cover;display:block}
.listing-body{padding:10px}
.listing-title{font-size:14px;color:#222;margin:0 0 6px}
.listing-meta{font-size:13px;color:#777;margin-bottom:8px}
.listing-price{color:#0fa1c4;font-weight:800}

@media (max-width:1100px){
  .listings-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:760px){
  .main-grid{grid-template-columns:1fr}
  .listings-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:480px){
  .listings-grid{grid-template-columns:1fr}
  .free-ad{width:100%}
}

/* Kayıt: servis sayfasındaki slider altındaki noktaları gizlemek için */
.carousel-indicators,
ul.carousel-indicators,
.slider-dots,
.slider .dots {
  display: none !important;
}