:root {
     --primary: #D11925;
     --dark: #111827;
     --text: #374151;
     --muted: #6B7280;
     --light: #F3F4F6;
     --white: #FFFFFF;

     --radius-xl: 1.25rem;
     --shadow-sm: 0 10px 30px rgba(17, 24, 39, .12);
     --shadow-xs: 0 8px 20px rgba(17, 24, 39, .10);

     --font-base: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
 }

 html {
     scroll-behavior: smooth;
 }

 body {
     color: var(--text);
     background: #fff;
     font-family: var(--font-base);
 }

 .skip-link {
     position: absolute;
     left: -9999px;
     top: 10px;
     background: #000;
     color: #fff;
     padding: .5rem .75rem;
     border-radius: .5rem;
     z-index: 9999;
 }

 .skip-link:focus {
     left: 10px;
     outline: 3px solid var(--primary);
 }

 .text-white-75 {
     color: rgba(255, 255, 255, .75) !important;
 }

 .text-white-25 {
     color: rgba(255, 255, 255, .25) !important;
 }

 .nav-glass {
     background: rgba(17, 24, 39, .78);
     backdrop-filter: blur(10px);
     border-bottom: 1px solid rgba(255, 255, 255, .08);
 }

 .navbar .nav-link {
     color: rgba(255, 255, 255, .80);
 }

 .navbar .nav-link:hover,
 .navbar .nav-link:focus {
     color: #fdfcfc;
     transform: scale(1.05);
        transition: transform .15s ease;


 }

 #mainNav .nav-link {
     position: relative;
     padding-bottom: .4rem;
 }


 #mainNav .nav-link.active {
     color: #fff;
 }

 #mainNav .nav-link.active::after {
     content: "";
     position: absolute;
     left: 50%;
     bottom: 0;
     width: 100%;
     height: 2px;
     transform: translateX(-50%);
     background: #fff;
     box-shadow:
         0 0 6px rgba(255, 255, 255, .7),
         0 0 14px rgba(255, 255, 255, .4);
 }



 .btn-primary {
     --bs-btn-bg: var(--primary);
     --bs-btn-border-color: var(--primary);
     --bs-btn-hover-bg: #b8141f;
     --bs-btn-hover-border-color: #b8141f;
     --bs-btn-focus-shadow-rgb: 209, 25, 37;
 }

 .btn-outline-light:hover {
     color: var(--dark);
 }

 .brand-mark {
     width: 14px;
     height: 14px;
     border-radius: 6px;
     background: var(--primary);
     box-shadow: 0 0 0 4px rgba(209, 25, 37, .18);
 }

 .brand-mark-sm {
     width: 12px;
     height: 12px;
 }

 .hero {
     position: relative;
     padding: 84px 0 54px;
     background: radial-gradient(1200px 600px at 10% 10%, rgba(209, 25, 37, .25), transparent 55%),
         radial-gradient(900px 500px at 90% 20%, rgba(255, 255, 255, .10), transparent 60%),
         linear-gradient(180deg, #0b1220 0%, #0f172a 100%);
     overflow: hidden;
 }

 .hero-bg {
     position: absolute;
     inset: -2px;
     opacity: .40;
     background-image:
         radial-gradient(circle at 10% 20%, rgba(209, 25, 37, .25), transparent 40%),
         radial-gradient(circle at 80% 10%, rgba(255, 255, 255, .12), transparent 45%),
         radial-gradient(circle at 20% 80%, rgba(255, 255, 255, .08), transparent 55%);
     filter: blur(2px);
 }

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

 .hero-kicker {
     letter-spacing: .12em;
     font-size: .82rem;
     color: rgba(255, 255, 255, .70);
 }

 .hero-card {
     background: rgba(255, 255, 255, .06);
     border: 1px solid rgba(255, 255, 255, .10);
     border-radius: var(--radius-xl);
     padding: 18px;
     box-shadow: 0 30px 80px rgba(0, 0, 0, .20);
 }

 .hero-card-top {
     display: flex;
     justify-content: flex-end;
     margin-bottom: 10px;
 }

 .hero-card-badge {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     color: #fff;
     font-size: .9rem;
     padding: .45rem .7rem;
     border-radius: 999px;
     background: rgba(209, 25, 37, .18);
     border: 1px solid rgba(209, 25, 37, .25);
 }

 .hero-media img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     border-radius: 1.1rem;
     border: 1px solid rgba(255, 255, 255, .12);
 }

 .badge-tile {
     display: flex;
     gap: 10px;
     align-items: center;
     padding: 12px 12px;
     border-radius: 14px;
     background: rgba(255, 255, 255, .06);
     border: 1px solid rgba(255, 255, 255, .10);
 }

 .badge-icon {
     width: 36px;
     height: 36px;
     border-radius: 12px;
     display: grid;
     place-items: center;
     background: rgba(209, 25, 37, .20);
     border: 1px solid rgba(209, 25, 37, .28);
     color: #fff;
 }

 .badge-title {
     color: #fff;
     font-weight: 700;
     font-size: .95rem;
 }

 .badge-sub {
     color: rgba(255, 255, 255, .70);
     font-size: .82rem;
 }

 .pill {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: .4rem .65rem;
     border-radius: 999px;
     background: rgba(255, 255, 255, .06);
     border: 1px solid rgba(255, 255, 255, .10);
     color: rgba(255, 255, 255, .82);
     font-size: .88rem;
 }

 .stat-tile {
     height: 100%;
     padding: 12px;
     border-radius: 16px;
     background: rgba(255, 255, 255, .06);
     border: 1px solid rgba(255, 255, 255, .10);
 }

 .stat-icon {
     width: 36px;
     height: 36px;
     border-radius: 14px;
     display: grid;
     place-items: center;
     background: rgba(255, 255, 255, .08);
     border: 1px solid rgba(255, 255, 255, .12);
     color: #fff;
 }

 .stat-title {
     color: #fff;
     font-weight: 700;
     margin-top: 10px;
     font-size: .95rem;
 }

 .stat-sub {
     color: rgba(255, 255, 255, .70);
     font-size: .82rem;
 }

 .section {
     padding: 72px 0;
 }

 .section-alt {
     background: linear-gradient(180deg, #fff 0%, #fafafa 100%);
 }

 .section-head {
     max-width: 780px;
 }

 .section-kicker {
     display: inline-block;
     font-weight: 700;
     color: var(--primary);
     letter-spacing: .08em;
     text-transform: uppercase;
     font-size: .85rem;
     margin-bottom: 6px;
     position: relative;
 }

 .section-kicker::after {
     content: "";
     display: block;
     width: 42px;
     height: 3px;
     background: var(--primary);
     border-radius: 99px;
     margin-top: 8px;
     opacity: .85;
 }

 .icon-bubble {
     width: 46px;
     height: 46px;
     border-radius: 16px;
     display: grid;
     place-items: center;
     background: rgba(209, 25, 37, .10);
     border: 1px solid rgba(209, 25, 37, .18);
     color: var(--primary);
     font-size: 1.25rem;
 }

 .service-card {
     border: 1px solid rgba(17, 24, 39, .08);
     border-radius: 18px;
     box-shadow: 0 0 0 rgba(0, 0, 0, 0);
     transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
 }

 .service-card:hover {
     transform: translateY(-4px);
     box-shadow: var(--shadow-xs);
     border-color: rgba(209, 25, 37, .22);
 }

 .service-card:focus-within {
     outline: 3px solid rgba(209, 25, 37, .25);
     outline-offset: 3px;
 }

 .callout {
     border-radius: 18px;
     border: 1px solid rgba(17, 24, 39, .08);
     background: #fff;
     box-shadow: var(--shadow-xs);
     padding: 18px;
 }

 .callout-icon {
     width: 44px;
     height: 44px;
     border-radius: 16px;
     display: grid;
     place-items: center;
     background: rgba(209, 25, 37, .10);
     border: 1px solid rgba(209, 25, 37, .18);
     color: var(--primary);
     font-size: 1.25rem;
 }

 .timeline {
     border-radius: var(--radius-xl);
 }

 .step {
     display: flex;
     gap: 14px;
     padding: 12px 0;
 }

 .step+.step {
     border-top: 1px dashed rgba(17, 24, 39, .14);
 }

 .step-num {
     width: 38px;
     height: 38px;
     border-radius: 14px;
     display: grid;
     place-items: center;
     font-weight: 800;
     color: #fff;
     background: var(--primary);
     box-shadow: 0 10px 20px rgba(209, 25, 37, .25);
 }

 .step-body h3 {
     margin-bottom: 4px;
 }

 .object-fit-cover {
     object-fit: cover;
 }

 .check {
     width: 24px;
     height: 24px;
     border-radius: 10px;
     display: grid;
     place-items: center;
     background: rgba(209, 25, 37, .12);
     border: 1px solid rgba(209, 25, 37, .20);
     color: var(--primary);
     flex: 0 0 auto;
 }

 .mini-icon {
     width: 42px;
     height: 42px;
     border-radius: 16px;
     display: grid;
     place-items: center;
     background: rgba(209, 25, 37, .10);
     border: 1px solid rgba(209, 25, 37, .18);
     color: var(--primary);
     font-size: 1.25rem;
 }

 .ref-tile {
     height: 72px;
     border-radius: 16px;
     border: 1px solid rgba(17, 24, 39, .10);
     background: #fff;
     display: grid;
     place-items: center;
     padding: 12px;
     transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
 }

 .ref-tile:hover {
     transform: translateY(-3px);
     box-shadow: var(--shadow-xs);
     border-color: rgba(209, 25, 37, .22);
 }

 .ref-tile img {
     max-width: 100%;
     max-height: 40px;
     opacity: .9;
 }

 .accordion {
     --bs-accordion-active-color: var(--dark);
     --bs-accordion-active-bg: rgba(209, 25, 37, .08);
     --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem rgba(209, 25, 37, .20);
 }

 .contact-item {
     display: flex;
     gap: 12px;
     align-items: flex-start;
 }

 .contact-ic {
     width: 42px;
     height: 42px;
     border-radius: 16px;
     display: grid;
     place-items: center;
     background: rgba(209, 25, 37, .10);
     border: 1px solid rgba(209, 25, 37, .18);
     color: var(--primary);
     font-size: 1.25rem;
     flex: 0 0 auto;
 }

 .link-muted {
     color: var(--muted);
     text-decoration: none;
 }

 .link-muted:hover {
     color: var(--dark);
     text-decoration: underline;
 }

 .map-frame iframe {
     width: 100%;
     height: 100%;
     border: 0;
     background: linear-gradient(135deg, rgba(17, 24, 39, .04), rgba(209, 25, 37, .06));
     border-radius: 16px;
 }

 .footer {
     background: linear-gradient(180deg, #0f172a 0%, #0b1220 100%);
     padding: 38px 0;
 }

 .footer-link {
     color: rgba(255, 255, 255, .75);
     text-decoration: none;
 }

 .footer-link:hover {
     color: #fff;
     text-decoration: underline;
 }

 .footer-hr {
     border-color: rgba(255, 255, 255, .10);
 }

 .social {
     width: 40px;
     height: 40px;
     border-radius: 16px;
     display: grid;
     place-items: center;
     border: 1px solid rgba(255, 255, 255, .12);
     background: rgba(255, 255, 255, .06);
     color: #fff;
     text-decoration: none;
 }

 .social:hover {
     border-color: rgba(209, 25, 37, .30);
     background: rgba(209, 25, 37, .16);
 }

 :focus-visible {
     outline: 3px solid rgba(209, 25, 37, .35);
     outline-offset: 3px;
 }


 #about.section {
     padding: 56px 0;
 }

 .about-card {
     border-radius: var(--radius-xl);
 }

 .about-list {
     margin: 0;
     padding-left: 1.1rem;
     color: var(--text);

     columns: 2;
     column-gap: 2rem;
 }

 .about-list li {
     margin-bottom: .55rem;
     break-inside: avoid;
 }

 .about-list li::marker {
     color: var(--primary);
     font-weight: 700;
 }

 @media (max-width: 991.98px) {
     .about-list {
         columns: 1;
     }
 }

 .about-card .card-body {
     padding: 28px !important;
 }

 @media (min-width: 992px) {
     .about-card .card-body {
         padding: 36px !important;
     }
 }

 .pdf-frame-wrap {
     height: min(78vh, 820px);
     background: #0b1220;
 }

 .pdf-frame-wrap iframe {
     width: 100%;
     height: 100%;
     border: 0;
     background: #fff;
 }

 /* Sertifikalar */
 .cert-card {
     position: relative;
     display: block;
     border-radius: 18px;
     overflow: hidden;
     border: 1px solid rgba(17, 24, 39, .10);
     background: #fff;
     box-shadow: 0 0 0 rgba(0, 0, 0, 0);
     transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
     text-decoration: none;
 }

 .cert-card:hover {
     transform: translateY(-4px);
     box-shadow: var(--shadow-xs);
     border-color: rgba(209, 25, 37, .24);
 }

 .cert-media img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     filter: saturate(1.02);
     transform: scale(1.001);
     transition: transform .25s ease;
     object-position: top center;
 }

 .cert-card:hover .cert-media img {
     transform: scale(1.04);
 }

 .cert-overlay {
     position: absolute;
     inset: 0;
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
     gap: 2px;
     padding: 14px;
     background: linear-gradient(180deg, rgba(17, 24, 39, 0) 35%, rgba(17, 24, 39, .78) 100%);
     opacity: .92;
     transition: opacity .2s ease;
 }

 .cert-title {
     color: #fff;
     font-weight: 800;
     letter-spacing: .02em;
 }

 .cert-sub {
     color: rgba(255, 255, 255, .78);
     font-size: .9rem;
 }

 .cert-card::after {
     content: "";
     position: absolute;
     inset: 10px;
     border-radius: 14px;
     border: 1px solid rgba(255, 255, 255, .10);
     pointer-events: none;
 }

 @media (max-width: 575.98px) {
     .cert-sub {
         display: none;
     }
 }

 .section-pattern-bg {
     background-image: repeating-linear-gradient(284deg, transparent 0px, transparent 1px, rgb(251, 251, 251) 1px, rgb(251, 251, 251) 3px), repeating-linear-gradient(14deg, transparent 0px, transparent 1px, rgb(251, 251, 251) 1px, rgb(251, 251, 251) 3px), linear-gradient(90deg, rgba(223, 145, 145, 0.38), rgba(223, 145, 145, 0.38));
 }

 @media (max-width: 991.98px) {
     #mainNav .navbar-collapse {
         overflow-x: hidden;
     }

     #mainNav .navbar-nav .nav-item,
     #mainNav .navbar-nav .nav-link {
         width: auto;
     }

     #mainNav .navbar-nav {
         gap: .25rem !important;
         padding-top: .5rem;
         padding-bottom: .5rem;
     }

     #mainNav .navbar-nav .nav-item.ms-lg-2 {
         margin-left: 0 !important;
     }

     #mainNav .navbar-nav .nav-item:has(.btn) {
         flex: 1 1 calc(50% - .5rem);
     }

     #mainNav .navbar-nav .btn {
         width: 100%;
         display: inline-flex;
         align-items: center;
         justify-content: center;
         white-space: nowrap;
         padding: .55rem .75rem;
         border-radius: 999px;
     }

     #mainNav .navbar-nav {
         display: flex;
         flex-wrap: wrap;
         align-items: stretch;
     }

     @media (max-width: 380px) {
         #mainNav .navbar-nav .nav-item:has(.btn) {
             flex: 1 1 100%;
         }
     }
 }