/* Global font: Rubik (loaded from Google Fonts in layout) */

html,

body,

h1,

h2,

h3,

h4,

h5,

h6,

p,

a,

li,

button,

input,

textarea {

  font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

}



@media (min-width: 768px) {

  html {

    font-size: 16px;

  }

}



.btn:focus,

.btn:active:focus,

.btn-link.nav-link:focus,

.form-control:focus,

.form-check-input:focus {

  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;

}



html {

  position: relative;

  min-height: 100%;

  margin: 0;

  padding: 0;

  font-size: 14px;

  width: -webkit-fill-available;

}



body {

  width: -webkit-fill-available;

  padding: 0;

  margin: 0;

  overflow-x: hidden;

}



/* Custom styles for AnkaraDijital */

.navbar-logo {

  height: 40px;

  width: auto;

}



.brand-title {

  font-weight: 600;

  font-size: 1.05rem;

}



.hero {

  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);

}



.hero-logo {

  max-height: 220px;

}



.card h5 {

  font-weight: 600;

}



.footer {

  position: fixed;

  left: 0;

  bottom: 0;

  width: 100%;

  background: #fff;

  padding: 0.75rem 0;

}



@media (max-width: 767px) {

  .hero-logo {

    max-height: 160px;

  }

}



/* Top contact bar */

.top-bar {

  background: #3b3b3b;

  color: #fff;

}



.top-bar a {

  color: #fff;

  text-decoration: none;

}



.top-bar .top-slogan {

  font-weight: 500;

}



.top-bar .top-contacts a {

  text-decoration: underline;

}



/* Add horizontal padding and ensure left/right alignment of top-bar content

   The .container already centers content; we add small side padding so the

   slogan and contacts appear padded from the viewport edges while remaining

   flush to left/right within the container. */

.top-bar .container {

  padding-left: 1rem;

  padding-right: 1rem;

}



/* Explicit alignment for slogan and contacts to guarantee left/right flush */

.top-bar .top-slogan {

  text-align: left;

}



.top-bar .top-contacts {

  text-align: right;

}



/* WhatsApp floating button */

.whatsapp-float {

  position: fixed;

  right: 20px;

  bottom: 24px;

  background: #25D366;

  color: #fff;

  width: 56px;

  height: 56px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);

  z-index: 2000;

}



.whatsapp-float svg {

  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.06));

}



/* Mega menu styling: full width white area under header */

.mega-menu-wrapper {

  width: 100%;

  background: transparent;

}



.mega-menu {

  background: #ffffff;

  border-top: 1px solid rgba(0, 0, 0, 0.06);

  display: none;

}



.mega-menu .container h5 {

  font-weight: 700;

}



/* Show mega menu when hovering the services dropdown */

.nav-item.dropdown:hover~.mega-menu-wrapper .mega-menu,

.nav-item.dropdown:focus-within~.mega-menu-wrapper .mega-menu {

  display: block;

}



/* Alternative JS-based show handled by adding a class on body when dropdown open (fallback) */

.mega-menu.show {

  display: block;

}



/* Header styling: background color requested */

.navbar.navbar-expand-lg {

  background: #242729 !important;

}



.navbar .nav-link,

.navbar .brand-title,

.navbar .navbar-logo {

  color: #fff !important;

}



/* Subtle hover background for header menu links */

.navbar .nav-link:hover {

  background: rgba(255, 255, 255, 0.06);

  border-radius: 6px;

  color: #fff !important;

}



.navbar .dropdown-menu {

  min-width: 200px;

}



.navbar .dropdown-menu .dropdown-item {

  color: #333;

}



/* Make the specific "Neler Yapıyoruz" dropdown span the full header width and sit

   immediately below the header on desktop. Items are centered and wrap when needed.

   On small screens (collapsed navbar), fall back to the normal stacked dropdown. */

nav.navbar {

  position: relative;

  /* anchor absolute child */

}



.dropdown-menu[aria-labelledby="servicesDropdown"] {

  position: absolute;

  left: 0;

  right: 0;

  top: 100%;

  width: 100%;

  background: #fff;

  border: none;

  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);

  z-index: 1100;

  /* hidden by default via opacity/transform so we can animate */

  opacity: 0;

  transform: translateY(-6px);

  pointer-events: none;

  visibility: hidden;

  transition: opacity .18s ease, transform .18s ease;

  padding: .75rem 0;

  display: flex;

  justify-content: center;

  gap: 0.5rem 1rem;

  flex-wrap: wrap;

}



/* Make the header and hero carousel flush (no gap) */

nav.navbar.mb-3,

nav.navbar {

  margin-bottom: 0;

  /* remove bootstrap .mb-3 spacing so hero/carousel sits directly under header */

}



/* Ensure hero section has no top padding or margin when using full-width carousel */

.hero {

  margin-top: 0;

  padding-top: 0;

}



/* Carousel image styles: full-bleed, cover cropping for consistent visuals */

#homeCarousel .carousel-item img {

  width: 100%;

  height: 500px;

  /* default desktop height; adjust as needed */

  object-fit: cover;

  object-position: center center;

  display: block;

}



/* Responsive: smaller height on narrow viewports */

@media (max-width: 767px) {

  #homeCarousel .carousel-item img {

    height: 260px;

  }

}



/* Center slide captions both vertically and horizontally */

#homeCarousel .carousel-caption {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  right: auto;

  bottom: auto;

  width: 100%;

  padding: 0 1rem;

  pointer-events: none;

  /* allow clicks to pass to controls unless on inner elements */

}



#homeCarousel .carousel-caption .caption-inner {

  max-width: 900px;

  margin: 0 auto;

  text-align: center;

  color: #fff;

  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);

  pointer-events: auto;

  /* allow button clicks */

}



#homeCarousel .carousel-caption h3 {

  font-size: clamp(1.25rem, 2.5vw, 2rem);

  font-weight: 700;

}



#homeCarousel .carousel-caption p {

  font-size: clamp(0.9rem, 1.6vw, 1.1rem);

}



#homeCarousel .carousel-caption .btn {

  margin-top: .75rem;

}



/* Make desktop carousel draggable with mouse cursor feedback */

#homeCarousel {

  cursor: grab;

}



#homeCarousel:active {

  cursor: grabbing;

}



#homeCarousel .carousel-item img {

  user-select: none;

  -webkit-user-drag: none;

}



/* When dragging, remove transition on inner so movement follows pointer */

.carousel-inner.dragging {

  transition: none !important;

}



.carousel-inner {

  will-change: transform;

}



/* Flickity integration styles */

.main-carousel {

  background: transparent;

}



.main-carousel .carousel-cell {

  width: 100%;

  margin-right: 0;

  position: relative;

}



.main-carousel .carousel-cell img {

  width: 100%;

  height: 500px;

  object-fit: cover;

  object-position: center;

  display: block;

}



/* Carousel caption positioned over image (like Bootstrap carousel) */

.main-carousel .carousel-caption {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  width: 100%;

  padding: 0 1rem;

  pointer-events: none;

  z-index: 10;

}



.main-carousel .carousel-caption .caption-inner {

  max-width: 900px;

  margin: 0 auto;

  text-align: center;

  color: #fff;

  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);

  pointer-events: auto;

}



.main-carousel .carousel-caption h3 {

  font-size: clamp(1.25rem, 2.5vw, 2rem);

  font-weight: 700;

  margin-bottom: 0.5rem;

}



.main-carousel .carousel-caption p {

  font-size: clamp(0.9rem, 1.6vw, 1.1rem);

  margin-bottom: 0.5rem;

}



.main-carousel .carousel-caption .btn {

  margin-top: .5rem;

}



/* Flickity navigation buttons styling */

.flickity-button {

  background: rgba(0, 0, 0, 0.5);

}



.flickity-button:hover {

  background: rgba(0, 0, 0, 0.75);

}



.flickity-button:disabled {

  display: none;

}



/* Page dots styling */

.flickity-page-dots {

  bottom: 20px;

}



.flickity-page-dots .dot {

  width: 12px;

  height: 12px;

  opacity: 0.5;

  background: #fff;

  border: 2px solid #fff;

}



.flickity-page-dots .dot.is-selected {

  opacity: 1;

  background: #007bff;

}



@media (max-width: 767px) {

  .main-carousel .carousel-cell img {

    height: 260px;

  }

}



.dropdown-menu[aria-labelledby="servicesDropdown"] li {

  display: inline-block;

  margin: 0;

}



.dropdown-menu[aria-labelledby="servicesDropdown"] .dropdown-item {

  color: #000;

  padding: .35rem .8rem;

  white-space: nowrap;

  font-size: 0.9rem;

  /* slightly smaller text for submenu links */

}



/* Icon circle + hover behavior */

.icon-circle {

  display: inline-flex;

  width: 44px;

  /* larger icon container */

  height: 44px;

  align-items: center;

  justify-content: center;

  background: #f5f5f5;

  /* light gray */

  /* rectangular / square look (not circular) */

  border-radius: 6px;

  color: #222;

  transition: background .12s ease, color .12s ease, transform .12s ease;

}



.icon-circle i {

  font-size: 1.25rem;

  /* increase icon glyph size */

}



.dropdown-menu[aria-labelledby="servicesDropdown"] .dropdown-item:hover .icon-circle,

.mega-menu .service-link:hover .icon-circle,

[aria-labelledby="servicesDropdown"] a:hover .icon-circle,

[aria-labelledby="servicesDropdown"] a:focus .icon-circle {

  background: #000;

  /* black on hover */

  color: #fff;

}



/* Ensure links inside the submenu block (absolute row with aria-labelledby)

   Display the category name (span) in a gray tone by default and black on hover. */

[aria-labelledby="servicesDropdown"] a {

  text-decoration: none;

  color: inherit;

  /* don't force link color on the whole anchor */

}



[aria-labelledby="servicesDropdown"] a:hover,

[aria-labelledby="servicesDropdown"] a:focus {

  text-decoration: none;

}



/* Target the category name span (last child in the anchor) so the icon

   coloring isn't affected. Default: gray; hover/focus: black. */

[aria-labelledby="servicesDropdown"] a>span:last-child {

  color: #6c757d;

  /* bootstrap-secondary / gray */

  font-size: 0.9rem;

  /* ensure consistent size */

}



[aria-labelledby="servicesDropdown"] a:hover>span:last-child,

[aria-labelledby="servicesDropdown"] a:focus>span:last-child {

  color: #000;

}



.dropdown-menu[aria-labelledby="servicesDropdown"].show {

  opacity: 1;

  transform: translateY(0);

  pointer-events: auto;

  visibility: visible;

}



/* Hide the inline absolute submenu (rendered in layout) by default and

   show it when the JS adds .show. This targets the div[row] that has

   aria-labelledby="servicesDropdown" in `_Layout.cshtml`. */

div[aria-labelledby="servicesDropdown"] {

  /* inline absolute submenu (rendered in layout) - hidden by default */

  opacity: 0;

  transform: translateY(-6px);

  pointer-events: none;

  visibility: hidden;

  transition: opacity .18s ease, transform .18s ease;

}



div[aria-labelledby="servicesDropdown"].show {

  opacity: 1;

  transform: translateY(0);

  pointer-events: auto;

  visibility: visible;

}



/* Mobile: revert to regular dropdown behavior inside collapsed navbar */

@media (max-width: 991px) {

  .dropdown-menu[aria-labelledby="servicesDropdown"] {

    position: static;

    box-shadow: none;

    /* on mobile, show normally (no animation) */

    opacity: 1 !important;

    transform: none !important;

    pointer-events: auto !important;

    visibility: visible !important;

    display: block !important;

    padding: 0.25rem 0;

  }



  .dropdown-menu[aria-labelledby="servicesDropdown"] li {

    display: block;

  }



  .dropdown-menu[aria-labelledby="servicesDropdown"] .dropdown-item {

    padding: .5rem 1rem;

  }

}



/* Ensure dropdown caret and toggles are visible on dark bg */

.navbar .navbar-toggler {

  border-color: rgba(255, 255, 255, 0.1);

}



.navbar .navbar-toggler-icon {

  filter: invert(1) brightness(2);

}



/* Site footer styles (use .site-footer so we don't conflict with legacy .footer rule) */

.site-footer {

  background: #1f2933;

  /* dark slate */

  color: #e6eef8;

  padding: 3rem 0 2rem;

}



/* Footer links: light gray by default, white on hover/focus */

.site-footer a {

  color: #6c757d !important;

  /* requested light gray */

  text-decoration: none;

  transition: color .12s ease;

}



.site-footer a:hover,

.site-footer a:focus {

  color: #ffffff !important;

  /* white on hover/focus */

  text-decoration: none;

}



.site-footer .footer-logo {

  max-height: 54px;

}



.site-footer h5 {

  color: #fff;

  font-weight: 700;

  margin-bottom: .75rem;

}



.site-footer .footer-slogan {

  color: #cfe6ff;

  font-size: .95rem;

}



.site-footer .footer-links li,

.site-footer .footer-contact li {

  margin-bottom: .5rem;

}



@media (max-width: 767px) {

  .site-footer {

    text-align: left;

  }

}



/* Footer bottom copyright style */

.site-footer .footer-bottom {

  text-align: left;

  font-size: 1rem;

  /* slightly larger than small */

  color: #bfc9d6;

  /* light gray */

  font-weight: 500;

  padding-top: 0.5rem;

}



@media (min-width: 768px) {

  .site-footer .footer-bottom {

    font-size: 1.05rem;

  }

}



/* Categories block styles (left links + right 4-up image grid) */

.category-links a {

  color: #6c757d;

  text-decoration: none;

  font-weight: 500;

  transition: color .12s ease, transform .12s ease;

}



.category-links a:hover {

  color: #000;

  transform: translateX(4px);

}



.category-thumb {

  width: 120px;

  height: 120px;

  object-fit: cover;

  display: inline-block;

  border-radius: 0;

  /* rectangular images */

  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);

}



@media (max-width: 767px) {

  .category-thumb {

    width: 88px;

    height: 88px;

  }

}



/* Box style for left-side category links */

.category-box {

  display: block;

  background: #ffffff;

  border: 1px solid #000;

  padding: 0.6rem 0.9rem;

  border-radius: 6px;

  color: #000;

}



.category-box:hover {

  background: #f8f9fa;

  text-decoration: none;

}



/* Make left boxed category names slightly larger and bolder */

.category-box {

  font-size: 1.05rem;

  font-weight: 600;

}



/* Sidebar-specific category list (used by _Categories in "sidebar" mode)

   Keep styles scoped to .category-sidebar to avoid affecting other list-groups */

.list-group.category-sidebar {

  padding: 0;

}



.list-group.category-sidebar .list-group-item {

  border: 1px solid #000;

  border-radius: 6px;

  margin-bottom: 0.5rem;

  padding: 0.6rem 0.9rem;

  background: #fff;

  color: #000;

  font-weight: 600;

  transition: background .12s ease, transform .12s ease, color .12s ease;

}



.list-group.category-sidebar .list-group-item:hover {

  background: #f8f9fa;

  transform: translateX(4px);

  color: #000;

}



.list-group.category-sidebar .list-group-item.active {

  background: #000;

  color: #fff;

  border-color: #000;

}



/* Right-side category name (caption) spacing and size */

.category-name {

  font-weight: 600;

  margin-top: 0.6rem;

  color: #222;

  font-size: 1.05rem;

}



/* Contact descriptions: stacked full-width blocks with larger images */

.contact-block {

  padding: 2rem;

}



.contact-desc-img {

  width: auto;

  max-width: auto;

  height: auto;

  display: block;

}



@media (max-width: 767px) {

  .contact-desc-img {

    max-width: 260px;

  }

}



.contact-desc {

  white-space: pre-line;

  /* preserve line breaks (satır satır) */

  font-size: 1.2rem;

  color: #222;

  line-height: 1.7;

}



/* Slight spacing when multiple blocks are present */

#contact-descriptions .contact-block+.contact-block {

  margin-top: 1.5rem;

  background-color: #fff;

}