@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');

:root {
     --primary: #36A9E1;
     --primary-hover: #298abc;
     --secondary: #022953;
     --dark-bg: #020024;
     --page-bg: #f8fafc;
     --light-bg: #ffffff;
     --text-main: #334155;
     --text-muted: #64748b;
     --border-color: #e2e8f0;

     --shadow-sm: 0 4px 6px -1px rgba(2, 41, 83, 0.05), 0 2px 4px -1px rgba(2, 41, 83, 0.03);
     --shadow-md: 0 10px 15px -3px rgba(2, 41, 83, 0.08), 0 4px 6px -2px rgba(2, 41, 83, 0.04);
     --shadow-lg: 0 20px 25px -5px rgba(2, 41, 83, 0.1), 0 10px 10px -5px rgba(2, 41, 83, 0.04);
     --shadow-hover: 0 25px 40px -10px rgba(54, 169, 225, 0.25);

     --transition-fast: 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
     --transition-normal: 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
     --transition-slow: 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);

     --radius-md: 0.75rem;
     --radius-lg: 1rem;
     --radius-xl: 1.5rem;
}

body {
     font-family: 'Outfit', sans-serif;
     font-size: 16px;
     font-weight: 400;
     line-height: 1.5;
     color: var(--text-main);
     background-color: var(--page-bg);
     margin: 0;
     padding: 0;
}

p {
     line-height: 1.75;
}

/* Input / textarea / select / button — focus: yalnızca border rengi */
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="file"]):not([type="color"]),
textarea,
select,
.form-control,
.form-select {
     transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="file"]):not([type="color"]):focus,
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="file"]):not([type="color"]):focus-visible,
textarea:focus,
textarea:focus-visible,
select:focus,
select:focus-visible,
.form-control:focus,
.form-control:focus-visible,
.form-select:focus,
.form-select:focus-visible {
     outline: none !important;
     box-shadow: none !important;
     border-color: var(--primary) !important;
}

button:focus,
button:focus-visible,
.btn:focus,
.btn:focus-visible,
[type="button"]:focus,
[type="submit"]:focus,
[type="reset"]:focus {
     outline: none !important;
     box-shadow: none !important;
     border-color: var(--primary) !important;
}

.line-clamp-3 {
     display: -webkit-box;
     -webkit-line-clamp: 3;
     -webkit-box-orient: vertical;
     overflow: hidden;
     text-overflow: ellipsis;
}

.line-clamp-2 {
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
     text-overflow: ellipsis;
}

header.site-header {
     padding-top: 2rem;
     background: var(--dark-bg);
     background: linear-gradient(135deg, var(--dark-bg) 0%, var(--secondary) 100%);
     position: relative;
     width: 100%;
     display: block;
     color: #fff;
     overflow: hidden;
}

header.site-header > .container-fluid {
     position: relative;
     z-index: 1;
}

/* Ana sayfa: hero — alt kenar tam oval */
header.site-header--hero {
     min-height: 80vh;
     padding-bottom: 6.5rem;
     clip-path: none;
}

header.site-header--hero::after {
     content: "";
     position: absolute;
     left: 50%;
     bottom: 0;
     z-index: 0;
     transform: translate(-50%, 48%);
     width: 140%;
     height: clamp(7rem, 22vw, 15rem);
     background: var(--page-bg);
     border-radius: 50%;
     pointer-events: none;
}

/* İç sayfalar: yalnızca navbar yüksekliği */
header.site-header--compact {
     min-height: auto;
     height: auto;
     padding-bottom: 1.75rem;
     clip-path: none;
}

header.site-header--compact::after {
     display: none;
}

.mt-6 {
     margin-top: 6rem !important;
}

.mt-8 {
     margin-top: 8rem !important;
}

.mt-10 {
     margin-top: 15rem !important;
}

/* —— Üst menü —— */
header.site-header .site-navbar-brand {
     transition: opacity 0.25s ease;
}

header.site-header .site-navbar-brand:hover {
     opacity: 0.88;
}

header.site-header .site-navbar-toggler {
     width: 2.75rem;
     height: 2.75rem;
     border-radius: 0.5rem;
     border: 1px solid rgba(255, 255, 255, 0.2);
     background: rgba(255, 255, 255, 0.06);
     transition: background-color 0.2s ease, border-color 0.2s ease;
}

header.site-header .site-navbar-toggler:hover {
     background: rgba(54, 169, 225, 0.15);
     border-color: rgba(54, 169, 225, 0.45);
}

header.site-header .site-nav .nav-link {
     position: relative;
     color: rgba(255, 255, 255, 0.9);
     font-size: 0.9rem;
     font-weight: 600;
     letter-spacing: 0.02em;
     padding: 0.75rem 1.55rem !important;
     border-radius: 999px;
     transition: color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}

header.site-header .site-nav .nav-link:hover {
     color: #fff;
     background-color: rgba(54, 169, 225, 0.16);
}

header.site-header .site-nav .nav-link.active {
     color: #fff;
     background-color: rgba(54, 169, 225, 0.28);
     box-shadow: 0 0 0 1px rgba(54, 169, 225, 0.4);
}

header.site-header h2 {
     font-size: 3rem;
     font-weight: 200;
}

.hero-slider .hero-slider-baslik {
     margin-bottom: 0;
}

.hero-slider .hero-slider-yazi {
     max-width: 42rem;
     margin-left: auto;
     margin-right: auto;
}

.hero-slider .hero-slider-gorsel {
     display: block;
     width: 100%;
     max-width: 100%;
     height: auto;
     margin-left: auto;
     margin-right: auto;
}

.hero-slider-ozellikler {
     margin-top: 2.5rem;
}

.hero-slider-ozellik {
     position: relative;
     padding: 1.25rem 0.75rem;
}

.hero-slider-ozellik i {
     display: block;
     font-size: 2.75rem;
     line-height: 1;
     color: #36A9E1;
     margin-bottom: 1rem;
}

.hero-slider-ozellik-metin {
     display: flex;
     flex-direction: column;
     gap: 0.15rem;
     font-size: 0.68rem;
     font-weight: 700;
     letter-spacing: 0.06em;
     line-height: 1.35;
     text-transform: uppercase;
     color: rgba(255, 255, 255, 0.92);
}

@media (min-width: 992px) {
     .hero-slider-ozellik:not(:last-child)::before {
          content: "";
          position: absolute;
          right: 0;
          left: auto;
          top: 12%;
          height: 76%;
          width: 1px;
          background: rgba(255, 255, 255, 0.22);
     }
}

@media (max-width: 991.98px) {
     .hero-slider-ozellik:nth-child(odd)::before {
          content: "";
          position: absolute;
          right: 0;
          left: auto;
          top: 12%;
          height: 76%;
          width: 1px;
          background: rgba(255, 255, 255, 0.22);
     }

     .hero-slider-ozellik:nth-child(-n+2) {
          border-bottom: 1px solid rgba(255, 255, 255, 0.12);
          margin-bottom: 0.25rem;
          padding-bottom: 1.5rem;
     }

     .hero-slider-ozellik i {
          font-size: 2.25rem;
     }

     .hero-slider-ozellik-metin {
          font-size: 0.62rem;
     }
}

.btn-primary {
     background-color: var(--primary) !important;
     border-color: var(--primary) !important;
     color: #fff !important;
     font-weight: 600;
     border-radius: 2rem;
     padding: 0.5rem 1.25rem;
     transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease,
          box-shadow 0.25s ease;
}

.btn-primary:hover,
.btn-primary:active {
     background-color: var(--primary-hover) !important;
     border-color: var(--primary-hover) !important;
     color: #fff !important;
     transform: translateY(-1px);
     box-shadow: 0 4px 14px rgba(54, 169, 225, 0.35);
}

.btn-primary:focus,
.btn-primary:focus-visible {
     background-color: var(--primary-hover) !important;
     border-color: var(--primary) !important;
     color: #fff !important;
     transform: translateY(-1px);
     box-shadow: none !important;
     outline: none !important;
}

.hero-slider-cta {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 0.45rem;
}

.hero-slider-cta-ikon {
     font-size: 1.05em;
     line-height: 1;
     transition: transform 0.28s ease;
}

.hero-slider-cta:hover .hero-slider-cta-ikon,
.hero-slider-cta:focus-visible .hero-slider-cta-ikon {
     transform: translateX(5px);
}

header.site-header .logo {
     height: 35px;
}

header.site-header .navbar-toggler {
     border: none;
     padding: 0;
     color: #fff;
}

header.site-header .navbar-toggler:focus,
header.site-header .navbar-toggler:focus-visible {
     box-shadow: none !important;
     outline: none !important;
     border-color: var(--primary) !important;
}

header.site-header nav.navbar-dark .navbar-toggler-icon {
     --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
     background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Mobil menü paneli */
@media (max-width: 991.98px) {
     #mainNavbar.offcanvas.site-nav-panel {
          --bs-offcanvas-bg: rgb(3, 5, 18);
          background: linear-gradient(180deg, rgb(8 10 42) 0%, rgb(3 5 18) 100%) !important;
          color: rgba(255, 255, 255, 0.95);
     }

     #mainNavbar .site-nav-panel-header {
          border-bottom: 1px solid rgba(255, 255, 255, 0.1);
          padding: 1.25rem 1.25rem 1rem;
     }

     #mainNavbar .site-nav-panel-header .offcanvas-title {
          font-size: 0.8rem;
          font-weight: 700;
          letter-spacing: 0.12em;
          text-transform: uppercase;
          color: #36A9E1;
     }

     #mainNavbar .site-nav {
          gap: 0.15rem;
          padding-top: 0.5rem;
     }

     #mainNavbar .site-nav .nav-link {
          border-radius: 0.5rem;
          padding: 0.85rem 1rem !important;
          border-left: 3px solid transparent;
     }

     #mainNavbar .site-nav .nav-link:hover,
     #mainNavbar .site-nav .nav-link.active {
          background-color: rgba(54, 169, 225, 0.12);
          border-left-color: #36A9E1;
          color: #36A9E1;
          box-shadow: none;
     }
}

h1.baslik {
     color: var(--secondary);
     font-size: 32px;
     font-weight: 800;
     position: relative;
     padding-bottom: 2rem;
}

h1.baslik:before {

     content: "";
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100px;
     height: 6px;
     background-color: #36A9E1;
}

.sayfa-404 h1.baslik {
     font-size: 90px;
     line-height: 1;
}

.sayfa-404 h1.baslik::before {
     left: 50%;
     transform: translateX(-50%);
}

.baslik2 {
     color: var(--secondary);
     font-size: 32px;
     font-weight: 800;
     position: relative;
     padding-bottom: 2rem;
}

.baslik2:before {
     content: "";
     position: absolute;
     bottom: 0;
     left: 50%;
     transform: translateX(-50%);
     width: 100px;
     height: 6px;
     background-color: #36A9E1;
}

h5 {
     color: #36A9E1;
}

.btn {
     font-weight: 600;
     padding: 0.6rem 1.5rem;
     border-width: 2px !important;
     border-radius: 2rem !important;
     white-space: nowrap;
     transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease,
          transform 0.25s ease, box-shadow 0.25s ease;
}

.btn-outline-info {
     color: var(--primary) !important;
     border-color: rgba(54, 169, 225, 0.4) !important;
     background-color: transparent !important;
}

.btn-outline-info:hover,
.btn-outline-info:active {
     background-color: #36A9E1 !important;
     border-color: #36A9E1 !important;
     color: #fff !important;
     transform: translateY(-1px);
     box-shadow: 0 4px 14px rgba(54, 169, 225, 0.28) !important;
}

.btn-outline-info:focus,
.btn-outline-info:focus-visible {
     background-color: #36A9E1 !important;
     border-color: var(--primary) !important;
     color: #fff !important;
     transform: translateY(-1px);
     box-shadow: none !important;
     outline: none !important;
}

.btn-info {
     background-color: var(--primary) !important;
     border-color: var(--primary) !important;
     color: #fff !important;
}

.btn-info:hover,
.btn-info:active {
     background-color: var(--primary-hover) !important;
     border-color: var(--primary-hover) !important;
     color: #fff !important;
     transform: translateY(-1px);
     box-shadow: 0 4px 14px rgba(54, 169, 225, 0.28) !important;
}

.btn-info:focus,
.btn-info:focus-visible {
     background-color: var(--primary-hover) !important;
     border-color: var(--primary) !important;
     color: #fff !important;
     transform: translateY(-1px);
     box-shadow: none !important;
     outline: none !important;
}


.hizmetlerimiz {
     padding-top: 6.5rem;
     background: var(--dark-bg);
     background: linear-gradient(135deg, var(--dark-bg) 0%, var(--secondary) 100%);
     clip-path: none;
     min-height: 80vh;
     position: relative;
     width: 100%;
     display: block;
     color: #fff;
     padding-bottom: 8.5rem;
     overflow: hidden;
}

/* Üst kenar — header hero ovali ile aynı mantık (page-bg geçişi) */
.hizmetlerimiz::before {
     content: "";
     position: absolute;
     left: 50%;
     top: 0;
     z-index: 0;
     transform: translate(-50%, -48%);
     width: 140%;
     height: clamp(7rem, 22vw, 15rem);
     background: var(--page-bg);
     border-radius: 50%;
     pointer-events: none;
}

/* Alt kenar — header hero alt ovali ile aynı */
.hizmetlerimiz::after {
     content: "";
     position: absolute;
     left: 50%;
     bottom: 0;
     z-index: 0;
     transform: translate(-50%, 48%);
     width: 140%;
     height: clamp(7rem, 22vw, 15rem);
     background: var(--page-bg);
     border-radius: 50%;
     pointer-events: none;
}

.hizmetlerimiz > .container {
     position: relative;
     z-index: 1;
}

.hizmetlerimiz .pt-8 {
     padding-top: 3rem;
}

.hizmetlerimiz .row.mt-6 {
     margin-bottom: 2.5rem;
}

.hizmet-kart {
     position: relative;
     display: block;
     overflow: hidden;
     border-radius: var(--radius-lg);
     border: none;
     text-decoration: none;
     transition: var(--transition-normal);
}

.hizmet-kart img {
     position: relative;
     width: 100%;
     height: 280px;
     object-fit: cover;
     display: block;
     z-index: 0;
     transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.hizmet-kart::before {
     content: "";
     position: absolute;
     inset: 0;
     background: linear-gradient(to top, rgba(2, 41, 83, 0.9) 0%, rgba(2, 41, 83, 0.2) 50%, rgba(0, 0, 0, 0) 100%);
     z-index: 1;
     pointer-events: none;
     transition: background 0.4s ease;
}

.hizmet-kart h3 {
     position: absolute;
     left: 50%;
     bottom: 0;
     transform: translateX(-50%);
     width: 100%;
     margin: 0;
     padding: 0 1rem 2rem;
     color: #fff;
     font-size: 1.25rem;
     font-weight: 700;
     text-align: center;
     z-index: 2;
     transition: var(--transition-normal);
}

.hizmet-kart:hover {
     transform: translateY(-8px);
     box-shadow: var(--shadow-hover);
}

.hizmet-kart:hover img {
     transform: scale(1.1);
}

.hizmet-kart:hover h3 {
     color: #fff;
     transform: translateX(-50%) translateY(-5px);
}

.site-footer {
     position: relative;
     color: rgba(255, 255, 255, 0.88);
     overflow: hidden;
}

.footer-accent {
     height: 4px;
     width: 100%;
     background: linear-gradient(90deg, #36A9E1 0%, #2b8ec4 50%, #36A9E1 100%);
}

.footer-overlay {
     background: linear-gradient(160deg, var(--secondary) 0%, var(--dark-bg) 100%);
}

.footer-main {
     border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-logo {
     height: 38px;
     width: auto;
}

.footer-lead {
     font-size: 0.95rem;
     line-height: 1.7;
     color: rgba(255, 255, 255, 0.62);
     max-width: 22rem;
}

.footer-title {
     color: #36A9E1;
     font-size: 0.75rem;
     font-weight: 700;
     letter-spacing: 0.07em;
     text-transform: uppercase;
     margin-bottom: 1.1rem;
}

.footer-links li+li {
     margin-top: 0.35rem;
}

.footer-links a,
.footer-legal a {
     color: rgba(255, 255, 255, 0.78);
     text-decoration: none;
     font-size: 0.9375rem;
     font-weight: 500;
     transition: color 0.2s ease, padding-left 0.2s ease;
}

.footer-links a {
     display: inline-block;
     padding: 0.2rem 0;
     position: relative;
}

.footer-links a::before {
     content: "";
     position: absolute;
     left: 0;
     top: 50%;
     width: 0;
     height: 2px;
     background: #36A9E1;
     border-radius: 1px;
     transform: translateY(-50%);
     transition: width 0.2s ease;
}

.footer-links a:hover {
     color: #36A9E1;
     padding-left: 0.65rem;
}

.footer-links a:hover::before {
     width: 0.35rem;
}

.footer-legal a {
     position: relative;
     padding-bottom: 0.15rem;
}

.footer-legal a::after {
     content: "";
     position: absolute;
     left: 0;
     bottom: 0;
     width: 0;
     height: 1px;
     background: #36A9E1;
     transition: width 0.2s ease;
}

.footer-legal a:hover {
     color: #36A9E1;
}

.footer-legal a:hover::after {
     width: 100%;
}

.footer-contact li {
     display: block;
}

.footer-contact-label {
     display: block;
     font-size: 0.7rem;
     font-weight: 700;
     letter-spacing: 0.06em;
     text-transform: uppercase;
     color: rgba(255, 255, 255, 0.45);
     margin-bottom: 0.25rem;
}

.footer-contact-value,
.footer-contact a.footer-contact-value {
     font-size: 0.9375rem;
     line-height: 1.55;
     color: rgba(255, 255, 255, 0.82);
     text-decoration: none;
     transition: color 0.2s ease;
}

.footer-contact a.footer-contact-value:hover {
     color: #36A9E1;
}

.footer-bottom {
     background: rgba(0, 0, 0, 0.2);
}

.footer-copy {
     color: rgba(255, 255, 255, 0.45);
}

.footer-legal a {
     color: rgba(255, 255, 255, 0.52);
}

.py-xl-6 {
     padding-top: 4rem !important;
     padding-bottom: 4rem !important;
}

.urun-gruplari .urun-grup-kart {
     color: var(--secondary);
}

.urun-grup-kart-kutu {
     background-color: var(--light-bg);
     border-radius: var(--radius-lg);
     border: 1px solid var(--border-color);
     box-shadow: none;
     transition: var(--transition-normal);
}

.urun-gruplari .urun-grup-kart-foto {
     background-color: transparent;
     border-radius: 0;
     padding: 0;
     box-shadow: none;
     overflow: hidden;
}

.urun-gruplari .urun-grup-kart-foto img {
     display: block;
     width: 100%;
     height: auto;
     transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.urun-gruplari .urun-grup-kart h3 {
     font-size: 1.25rem;
     font-weight: 700;
     margin-bottom: 0;
     transition: var(--transition-normal);
}

.urun-gruplari .urun-grup-kart:hover .urun-grup-kart-kutu {
     border-color: var(--primary);
     transform: translateY(-8px);
     box-shadow: var(--shadow-hover);
}

.urun-gruplari .urun-grup-kart:hover img {
     transform: scale(1.08);
}

.urun-gruplari .urun-grup-kart:hover h3 {
     color: var(--primary);
}

/* Öne çıkan büyük kart + sağda 2×2 küçük kartlar */
.urun-grup-kart--one-cikan .urun-grup-kart-foto {
     padding: 0;
     min-height: 0;
}

.urun-grup-kart--one-cikan .urun-grup-kart-foto img {
     width: 100%;
     height: auto;
     max-width: 100%;
}

.urun-grup-kart--one-cikan h3 {
     font-size: 1.5rem;
}

.urun-gruplari-kucuk .urun-grup-kart-foto {
     padding: 0;
     min-height: 0;
     display: block;
}

.urun-gruplari-kucuk .urun-grup-kart-foto img {
     width: 100%;
     height: auto;
     max-width: 100%;
}

.urun-gruplari-kucuk .urun-grup-kart h3 {
     font-size: 0.95rem;
     line-height: 1.35;
}

/* Ürün listesi — kategori kartları ile aynı hover */
.urun-listesi .urun-kart {
     color: var(--secondary);
}

.urun-kart-kutu {
     background-color: var(--light-bg);
     border-radius: var(--radius-lg);
     border: 1px solid var(--border-color);
     box-shadow: none;
     transition: var(--transition-normal);
}

.urun-kart-foto {
     background-color: transparent;
     overflow: hidden;
}

.urun-kart-foto img {
     display: block;
     width: 100%;
     height: auto;
     transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.urun-kart-baslik {
     font-size: 1rem;
     font-weight: 700;
     line-height: 1.35;
     text-align: center;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     min-width: 0;
     width: 100%;
     transition: var(--transition-normal);
}

.urun-listesi .urun-kart:hover .urun-kart-kutu {
     border-color: var(--primary);
     transform: translateY(-8px);
     box-shadow: var(--shadow-hover);
}

.urun-listesi .urun-kart:hover img {
     transform: scale(1.08);
}

.urun-listesi .urun-kart:hover .urun-kart-baslik {
     color: var(--primary);
}

/* Ürün detay — kapak + galeri kartları */
.urun-detay-kapak.urun-kart-kutu,
.urun-detay-galeri .urun-kart-kutu {
     background-color: var(--light-bg);
     border-radius: var(--radius-lg);
     border: 1px solid var(--border-color);
     box-shadow: none;
     transition: var(--transition-normal);
}

.urun-detay-galeri .urun-kart-foto img {
     width: 100%;
     height: 100%;
     min-height: 72px;
     object-fit: cover;
}

.urun-detay-kapak:hover,
.urun-detay-galeri .urun-detay-galeri-kart:hover .urun-kart-kutu {
     border-color: var(--primary);
     transform: translateY(-4px);
     box-shadow: var(--shadow-hover);
}

.urun-detay-kapak:hover img,
.urun-detay-galeri .urun-detay-galeri-kart:hover img {
     transform: scale(1.08);
}

/* Teklif Al formu */
.teklif-form-kutu {
     background: #ffffff;
     border: 1px solid #dee2e6;
     border-radius: var(--radius-lg);
     padding: 2rem 1.75rem;
}

.teklif-form-kutu .form-control {
     border: 1px solid #dee2e6;
     border-radius: 0.5rem;
     padding: 0.75rem 1rem;
     background: #fff;
}

.teklif-form-kutu .guvenlik-kodu-alan {
     position: relative;
}

/* Breadcrumb — marka renkleri (#022953, #36A9E1) */
.site-breadcrumb {
     margin-bottom: 1.75rem;
}

.site-breadcrumb .breadcrumb {
     --bs-breadcrumb-divider: none;
     margin: 0;
     padding: 0.85rem 1.25rem 0.85rem 1rem;
     background: linear-gradient(135deg, #f0f6fc 0%, #f8fbfe 100%);
     border: 1px solid #dce8f4;
     border-left: 4px solid #36A9E1;
     border-radius: 0.5rem;
     align-items: center;
     flex-wrap: wrap;
     gap: 0.15rem 0;
}

.site-breadcrumb .breadcrumb-item {
     font-size: 0.875rem;
     font-weight: 500;
     color: #5a6d7e;
     display: inline-flex;
     align-items: center;
}

.site-breadcrumb .breadcrumb-item a {
     color: #022953;
     text-decoration: none;
     transition: color 0.2s ease;
}

.site-breadcrumb .breadcrumb-item a:hover {
     color: #36A9E1;
}

.site-breadcrumb .breadcrumb-item.active {
     color: #022953;
     font-weight: 700;
     max-width: 100%;
}

.site-breadcrumb .breadcrumb-item+.breadcrumb-item {
     padding-left: 0;
}

.site-breadcrumb .breadcrumb-item+.breadcrumb-item::before {
     content: "";
     float: none;
     display: inline-block;
     width: 0.4rem;
     height: 0.4rem;
     margin: 0 0.65rem;
     padding: 0;
     border: none;
     border-right: 2px solid #36A9E1;
     border-top: 2px solid #36A9E1;
     transform: rotate(45deg);
     vertical-align: middle;
     opacity: 0.85;
}

@media (max-width: 575.98px) {
     .site-breadcrumb .breadcrumb {
          padding: 0.75rem 1rem 0.75rem 0.85rem;
     }

     .site-breadcrumb .breadcrumb-item {
          font-size: 0.8125rem;
     }

     .site-breadcrumb .breadcrumb-item+.breadcrumb-item::before {
          margin: 0 0.45rem;
     }
}

/* Kategori sayfası: alt kategori butonları */
.alt-kategori-butonlari {
     display: flex;
     flex-wrap: wrap;
     gap: 0.75rem 1rem;
}

.alt-kategori-btn {
     font-weight: 600;
     padding: 0.6rem 1.25rem;
     border-width: 2px;
     border-radius: 2rem;
     white-space: nowrap;
     transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease,
          transform 0.25s ease, box-shadow 0.25s ease;
}

.alt-kategori-btn:hover {
     background-color: #36A9E1;
     border-color: #36A9E1;
     color: #fff;
     transform: translateY(-1px);
     box-shadow: 0 4px 14px rgba(54, 169, 225, 0.28);
}

.kategori-urun-yok {
     color: #856404;
     background-color: #fff3cd;
     border: 1px solid #ffeeba;
     border-radius: 0.375rem;
     padding: 1rem 1.25rem;
     font-size: 1rem;
}

@media (min-width: 992px) {
     .urun-gruplari-kucuk .urun-grup-kart h3 {
          font-size: 1.05rem;
     }

     .offcanvas-lg {
          position: static;
          transform: none;
          visibility: visible !important;
          background: transparent !important;
          border: 0;
          width: auto;
     }

     .offcanvas-lg .offcanvas-body {
          display: flex;
          align-items: center;
          padding: 0;
     }

     header.site-header .site-nav {
          flex-direction: row;
          align-items: center;
          gap: 0.15rem;
          padding: 0.35rem;
          background: rgba(255, 255, 255, 0.06);
          border: 1px solid rgba(255, 255, 255, 0.1);
          border-radius: 999px;
          backdrop-filter: blur(10px);
          -webkit-backdrop-filter: blur(10px);
     }
}

/* Arama Overlay Stilleri */
.search-overlay {
     position: fixed;
     inset: 0;
     background: linear-gradient(135deg, rgba(2, 0, 36, 0.98) 0%, rgba(2, 41, 83, 0.98) 100%);
     z-index: 99999;
     display: flex;
     align-items: center;
     justify-content: center;
     opacity: 0;
     visibility: hidden;
     transition: opacity 0.35s ease, visibility 0.35s ease;
}

.search-overlay.active {
     opacity: 1;
     visibility: visible;
}

.search-close-btn {
     position: absolute;
     top: 2rem;
     right: 2rem;
     background: transparent;
     border: none;
     color: rgba(255, 255, 255, 0.7);
     font-size: 3rem;
     line-height: 1;
     cursor: pointer;
     transition: color 0.25s ease, transform 0.25s ease;
     outline: none;
}

.search-close-btn:hover {
     color: #fff;
     transform: rotate(90deg);
}

.search-overlay-content {
     width: 100%;
     max-width: 700px;
     padding: 2rem;
}

.search-title {
     font-size: 2.2rem;
     font-weight: 300;
     color: #fff;
     letter-spacing: 1px;
     text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.search-input-wrapper {
     position: relative;
     margin: 0 auto;
     width: 100%;
}

.search-input {
     width: 100%;
     background: transparent;
     border: none;
     border-bottom: 2px solid rgba(255, 255, 255, 0.25);
     outline: none;
     color: #fff;
     font-size: 2.8rem;
     font-weight: 500;
     text-align: center;
     padding: 0.5rem 0;
     caret-color: var(--primary);
}

.search-input:focus,
.search-input:focus-visible {
     outline: none !important;
     box-shadow: none !important;
     border-bottom-color: var(--primary) !important;
}

.search-input::placeholder {
     color: rgba(255, 255, 255, 0.2);
}

.search-submit-btn {
     background: rgba(54, 169, 225, 0.12);
     color: #36A9E1;
     border: 1px solid rgba(54, 169, 225, 0.25);
     border-radius: 99px;
     padding: 0.75rem 2rem;
     font-size: 1.1rem;
     font-weight: 600;
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;
     cursor: pointer;
     transition: all 0.3s ease;
}

.search-submit-btn:focus,
.search-submit-btn:focus-visible {
     outline: none !important;
     box-shadow: none !important;
     border-color: var(--primary) !important;
}

.search-submit-btn:hover {
     background: var(--primary);
     color: #fff;
     box-shadow: 0 4px 20px rgba(54, 169, 225, 0.4);
     transform: translateY(-2px);
}

.search-submit-btn svg {
     transition: transform 0.3s ease;
}

.search-submit-btn:hover svg {
     transform: translateX(3px);
}

.search-trigger-btn {
     transition: opacity 0.25s ease, transform 0.2s ease;
}

.search-trigger-btn:hover {
     opacity: 0.8;
     transform: scale(1.08);
}

/* İçerik Detay Sayfası: Resim Galerisi Kart Tasarımı */
.galeri-kart {
     border: 1px solid rgba(0, 0, 0, 0.08);
     border-radius: 12px;
     overflow: hidden;
     padding: 0.5rem;
     background: #fff;
     transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.galeri-kart img {
     border-radius: 8px;
     width: 100%;
     height: 180px;
     object-fit: cover;
     transition: transform 0.3s ease;
}

.galeri-kart:hover {
     border-color: #36A9E1 !important;
     transform: translateY(-3px);
     box-shadow: 0 10px 30px rgba(54, 169, 225, 0.25);
}

.galeri-kart:hover img {
     transform: scale(1.04);
}

/* --- Kurumsal Sayfası Kartları (Hakkımızda / Vizyon / Misyon / Değerler) --- */
.kurumsal-kart {
     position: relative;
     background: #ffffff;
     border: 1px solid rgba(54, 169, 225, 0.08);
     border-radius: 16px;
     padding: 2.5rem 2rem;
     transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), 
                 box-shadow 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), 
                 border-color 0.3s ease;
     overflow: hidden;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
}

.kurumsal-kart::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     width: 4px;
     height: 100%;
     background: var(--primary);
     transition: transform 0.3s ease;
     transform: scaleY(0.3);
     transform-origin: top;
}

.kurumsal-kart:hover::before {
     transform: scaleY(1);
}

.kurumsal-kart-icon {
     width: 60px;
     height: 60px;
     border-radius: 12px;
     background: rgba(54, 169, 225, 0.06);
     color: var(--primary);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.75rem;
     margin-bottom: 1.5rem;
     transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.kurumsal-kart:hover .kurumsal-kart-icon {
     background: var(--primary);
     color: #ffffff;
     transform: scale(1.05) rotate(5deg);
}

.kurumsal-kart h3 {
     font-size: 1.35rem;
     font-weight: 700;
     color: var(--secondary);
     margin-bottom: 0.75rem;
     transition: color 0.3s ease;
}

.kurumsal-kart p {
     font-size: 0.95rem;
     line-height: 1.6;
     color: var(--text-muted);
     margin: 0;
}

.kurumsal-kart:hover {
     transform: translateY(-6px);
     border-color: rgba(54, 169, 225, 0.2);
     box-shadow: 0 15px 35px rgba(54, 169, 225, 0.15);
}

.kurumsal-etiket-grup {
     display: flex;
     flex-wrap: wrap;
     gap: 0.5rem;
     margin-top: 1.25rem;
}

.kurumsal-etiket {
     display: inline-flex;
     align-items: center;
     font-size: 0.85rem;
     font-weight: 600;
     color: var(--primary);
     background: rgba(54, 169, 225, 0.06);
     border: 1px solid rgba(54, 169, 225, 0.15);
     border-radius: 99px;
     padding: 0.45rem 1.15rem;
     transition: all 0.25s ease;
}

.kurumsal-etiket:hover {
     background: var(--primary);
     color: #ffffff;
     transform: translateY(-2px);
     box-shadow: 0 4px 10px rgba(54, 169, 225, 0.2);
}

/* —— İletişim sayfası —— */
.page-iletisim main {
     padding-bottom: 0;
}

.iletisim-sayfa .baslik {
     font-size: clamp(1.75rem, 3vw, 2.25rem);
}

.iletisim-giris {
     color: rgba(30, 41, 59, 0.78);
     line-height: 1.7;
}

.iletisim-liste li {
     display: flex;
     align-items: flex-start;
     gap: 1rem;
}

.iletisim-liste-ikon {
     flex-shrink: 0;
     width: 2.5rem;
     height: 2.5rem;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
     background: rgba(54, 169, 225, 0.1);
     color: var(--primary);
     font-size: 1.1rem;
}

.iletisim-liste-metin {
     color: var(--secondary);
     line-height: 1.65;
     text-decoration: none;
}

a.iletisim-liste-metin:hover {
     color: var(--primary);
}

.iletisim-form-panel {
     background: #ffffff;
     border-radius: 1rem;
     padding: 2rem 1.75rem;
     border: 1px solid #e9ecef;
}

.iletisim-form-panel .form-control {
     border: 1px solid #dee2e6;
     border-radius: 0.5rem;
     padding: 0.75rem 1rem;
     background: #fff;
}

.iletisim-form-panel .form-control:focus,
.iletisim-form-panel .form-control:focus-visible {
     border-color: var(--primary);
     box-shadow: none !important;
     outline: none !important;
}

.iletisim-form-panel select.form-control {
     appearance: auto;
}

.guvenlik-kodu-alan {
     position: relative;
     --captcha-w: 84px;
     --captcha-h: 32px;
     --captcha-inset: 8px;
     --captcha-pad-extra: 25px !important;
}

.guvenlik-kodu-gorsel {
     position: absolute;
     left: 10px;
     top: 50%;
     transform: translateY(-50%);
     width: var(--captcha-w);
     height: var(--captcha-h);
     object-fit: contain;
     border-radius: 0.35rem;
     pointer-events: none;
     z-index: 2;
}

.guvenlik-kodu-input {
     padding-left: calc(var(--captcha-w) + var(--captcha-pad-extra)) !important;
     line-height: 1.5;
}

.iletisim-harita-wrap {
     margin: 0;
     padding: 0;
     line-height: 0;
}

.iletisim-harita iframe {
     display: block;
     width: 100%;
     height: min(420px, 55vh);
     border: 0;
     vertical-align: top;
}

.site-footer.site-footer--iletisim,
.page-iletisim .site-footer {
     margin-top: 0 !important;
}

.sosyal-medya {
     display: flex;
     flex-wrap: wrap;
     gap: 0.6rem;
}

.iletisim-sosyal.sosyal-medya {
     margin-top: 2rem;
}

.footer-sosyal.sosyal-medya {
     margin-top: 1.25rem;
}

.sosyal-medya-link {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 2.5rem;
     height: 2.5rem;
     border-radius: 50%;
     text-decoration: none;
     font-size: 1.1rem;
     transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.iletisim-sosyal .sosyal-medya-link {
     background: rgba(54, 169, 225, 0.1);
     color: var(--primary);
}

.iletisim-sosyal .sosyal-medya-link:hover {
     background: var(--primary);
     color: #fff;
     transform: translateY(-2px);
}

.footer-sosyal .sosyal-medya-link {
     background: rgba(255, 255, 255, 0.08);
     color: rgba(255, 255, 255, 0.85);
}

.footer-sosyal .sosyal-medya-link:hover {
     background: #36A9E1;
     color: #fff;
     transform: translateY(-2px);
}