/* ============================================================
 YILDIRIM NAKLİYAT — Yeni Tasarım CSS
 Dosya: tema/site/assets/css/yildirim_theme.css
 ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

/* -------------------------------------------------------
 1. CSS DEĞIŞKENLERI (Tema Renkleri)
 ------------------------------------------------------- */
 :root {
 --yl-red: #e01c24;
 --yl-red-dark: #b91219;
 --yl-red-light: #ff3d45;
 --yl-dark: #1a1a1a;
 --yl-gray: #555;
 --yl-light: #f5f5f5;
 --yl-white: #ffffff;
 --yl-border: #e8e8e8;
 --yl-shadow: 0 4px 20px rgba(0,0,0,0.08);
 --yl-radius: 12px;
 --yl-font: 'Poppins', sans-serif;
 --yl-section-py: 40px;
 --yl-section-header-mb: 24px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
 font-family: var(--yl-font) !important;
 color: var(--yl-dark);
 overflow-x: hidden;
}

/* -------------------------------------------------------
 2. TOP BAR
 ------------------------------------------------------- */
.yl-topbar {
 background: var(--yl-dark);
 color: rgba(255,255,255,0.8);
 font-size: 13px;
 padding: 8px 0;
}
.yl-topbar .container {
 display: flex;
 justify-content: space-between;
 align-items: center;
 flex-wrap: wrap;
 gap: 10px;
}
.yl-topbar a {
 color: rgba(255,255,255,0.8);
 text-decoration: none;
 display: inline-flex;
 align-items: center;
 gap: 6px;
 transition: color 0.2s;
}
.yl-topbar a:hover { color: var(--yl-white); }
.yl-topbar-left,
.yl-topbar-right {
 display: flex;
 align-items: center;
 gap: 20px;
 flex-wrap: wrap;
}
@media (max-width: 768px) {
 .yl-topbar { display: none; }
}

/* -------------------------------------------------------
 3. HEADER / NAVBAR
 ------------------------------------------------------- */
.yl-header {
 background: var(--yl-white);
 box-shadow: 0 2px 15px rgba(0,0,0,0.08);
 position: sticky;
 top: 0;
 z-index: 999;
 transition: all 0.3s;
}
.yl-header.scrolled {
 box-shadow: 0 4px 25px rgba(0,0,0,0.12);
}
.yl-header .container {
 display: flex;
 align-items: center;
 justify-content: space-between;
 height: 88px;
 gap: 16px;
}
.yl-logo {
 display: inline-flex;
 align-items: center;
 flex-shrink: 0;
 text-decoration: none;
 line-height: 0;
}
.yl-logo img {
 height: 78px;
 width: auto;
 max-height: 78px;
 object-fit: contain;
 display: block;
}

/* Desktop Nav */
.yl-nav {
 display: flex;
 align-items: center;
 gap: 8px;
 list-style: none;
 margin: 0;
 padding: 0;
 height: 100%;
}
.yl-nav-item {
 position: relative;
 height: 88px;
 display: flex;
 align-items: center;
}
.yl-nav-link {
 font-family: var(--yl-font);
 font-size: 15px;
 font-weight: 600;
 color: var(--yl-dark);
 text-decoration: none;
 padding: 0 12px;
 display: flex;
 align-items: center;
 gap: 4px;
 height: 100%;
 border-bottom: 3px solid transparent;
 transition: all 0.2s;
 white-space: nowrap;
}
.yl-nav-link:hover,
.yl-nav-link.active {
 color: var(--yl-red);
 border-bottom-color: var(--yl-red);
}
.yl-nav-link i { font-size: 11px; }

/* Dropdown */
.yl-dropdown {
 position: absolute;
 top: 100%;
 left: 0;
 background: var(--yl-white);
 min-width: 220px;
 border-radius: 0 0 12px 12px;
 box-shadow: 0 15px 40px rgba(0,0,0,0.12);
 opacity: 0;
 visibility: hidden;
 transform: translateY(-8px);
 transition: all 0.25s;
 border-top: 3px solid var(--yl-red);
 z-index: 100;
}
.yl-nav-item:hover .yl-dropdown {
 opacity: 1;
 visibility: visible;
 transform: translateY(0);
}
.yl-dropdown a {
 display: block;
 padding: 12px 20px;
 color: var(--yl-dark);
 text-decoration: none;
 font-size: 14px;
 font-weight: 500;
 transition: all 0.2s;
 border-bottom: 1px solid #f5f5f5;
}
.yl-dropdown a:hover {
 color: var(--yl-red);
 background: #fff5f5;
 padding-left: 25px;
}

/* Header Right */
.yl-header-right {
 display: flex;
 align-items: center;
 gap: 15px;
}
.yl-header-tel {
 display: flex;
 align-items: center;
 gap: 8px;
 font-weight: 600;
 font-size: 16px;
 color: var(--yl-dark);
 text-decoration: none;
}
.yl-header-tel i {
 color: var(--yl-red);
 font-size: 18px;
}
.yl-btn {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 padding: 10px 22px;
 border-radius: 50px;
 font-weight: 600;
 font-size: 14px;
 text-decoration: none;
 transition: all 0.3s;
 cursor: pointer;
 border: none;
 white-space: nowrap;
}
.yl-btn-red {
 background: var(--yl-red);
 color: var(--yl-white);
}
.yl-btn-red:hover {
 background: var(--yl-red-dark);
 color: var(--yl-white);
 transform: translateY(-2px);
 box-shadow: 0 6px 20px rgba(224,28,36,0.35);
}
.yl-btn-outline {
 background: transparent;
 color: var(--yl-red);
 border: 2px solid var(--yl-red);
}
.yl-btn-outline:hover {
 background: var(--yl-red);
 color: var(--yl-white);
 transform: translateY(-2px);
}
.yl-btn-white {
 background: var(--yl-white);
 color: var(--yl-red);
}
.yl-btn-white:hover {
 background: #f5f5f5;
 color: var(--yl-red);
}
.yl-btn-white-outline {
 background: transparent;
 color: var(--yl-white);
 border: 2px solid rgba(255,255,255,0.7);
}
.yl-btn-white-outline:hover {
 background: rgba(255,255,255,0.15);
 border-color: var(--yl-white);
}

/* Hamburger */
.yl-hamburger {
 display: none;
 flex-direction: column;
 gap: 5px;
 background: none;
 border: none;
 cursor: pointer;
 padding: 5px;
}
.yl-hamburger span {
 display: block;
 width: 26px;
 height: 3px;
 background: var(--yl-dark);
 border-radius: 3px;
 transition: all 0.3s;
}

@media (max-width: 992px) {
 .yl-nav { display: none; }
 .yl-header-right .yl-header-tel { display: none; }
 .yl-header-right .yl-btn { display: none; }
 .yl-hamburger { display: flex; }
 .yl-header .container { height: 76px; }
 .yl-logo img {
 height: 66px;
 max-height: 66px;
 }
}
@media (max-width: 480px) {
 .yl-logo img {
 height: 56px;
 max-height: 56px;
 }
}

/* -------------------------------------------------------
 4. HERO — TAM EKRAN SPLIT LAYOUT
 ------------------------------------------------------- */
.yl-hero {
 background: #ffffff;
 overflow: hidden;
 position: relative;
}

/* ── Ana İç Kapsayıcı (flex, full-width) ── */
.yl-hero-inner {
 display: flex;
 align-items: stretch;
 min-height: 520px;
 width: 100%;
}

/* ── Sol: İçerik ── */
.yl-hero-left {
 flex: 0 0 50%;
 max-width: 50%;
 display: flex;
 align-items: center;
 background: #ffffff;
 /* Container hizalaması: (100vw - 1320px) / 2 + 15px sol padding */
 padding: 40px 40px 40px clamp(15px, calc((100vw - 1320px) / 2 + 15px), 220px);
 position: relative;
 z-index: 2;
}

.yl-hero-content {
 max-width: 560px;
 width: 100%;
}

/* Tag */
.yl-hero-tag {
 display: inline-flex;
 align-items: center;
 gap: 7px;
 background: #fff0f0;
 color: var(--yl-red);
 font-size: 13px;
 font-weight: 700;
 padding: 7px 16px;
 border-radius: 50px;
 margin-bottom: 14px;
 border: 1px solid #ffd0d2;
 text-transform: uppercase;
 letter-spacing: 0.5px;
}

/* H1 Başlık */
.yl-hero-content h1 {
 font-size: clamp(34px, 4.5vw, 58px);
 font-weight: 900;
 line-height: 1.1;
 color: var(--yl-dark);
 margin-bottom: 12px;
 letter-spacing: -1px;
}
.yl-hero-content h1 .red,
.yl-hero-content h1 span[style*="color:#e01c24"] {
 color: var(--yl-red) !important;
}

/* Açıklama */
.yl-hero-desc {
 font-size: 16px;
 color: #666;
 line-height: 1.75;
 margin-bottom: 16px;
 max-width: 460px;
}

/* Özellikler */
.yl-hero-features {
 display: flex;
 align-items: center;
 gap: 16px;
 flex-wrap: wrap;
 margin-bottom: 20px;
 padding-bottom: 18px;
 border-bottom: 1px solid #f0f0f0;
}
.yl-hero-feat {
 display: flex;
 align-items: center;
 gap: 7px;
 font-size: 14px;
 font-weight: 600;
 color: var(--yl-gray);
}
.yl-hero-feat i {
 color: var(--yl-red);
 font-size: 17px;
}

/* Butonlar */
.yl-hero-btns {
 display: flex;
 gap: 12px;
 flex-wrap: wrap;
 margin-bottom: 22px;
}
.yl-hero-btns .yl-btn {
 font-size: 15px;
 padding: 13px 26px;
}
.yl-hero-btns .yl-btn-red {
 box-shadow: 0 8px 24px rgba(224,28,36,0.3);
}
.yl-hero-btns .yl-btn i:last-child {
 transition: transform 0.25s;
}
.yl-hero-btns .yl-btn:hover i:last-child {
 transform: translateX(4px);
}

/* Güven Rozetleri */
.yl-hero-badges {
 display: flex;
 align-items: center;
 gap: 0;
 padding-top: 14px;
 border-top: 1px solid #f0f0f0;
}
.yl-hero-badge {
 display: flex;
 flex-direction: column;
 gap: 3px;
 padding: 0 24px 0 0;
}
.yl-hero-badge:last-child { padding-right: 0; }
.yl-hero-badge-num {
 font-size: 22px;
 font-weight: 800;
 color: var(--yl-dark);
 line-height: 1;
}
.yl-hero-badge-txt {
 font-size: 12px;
 font-weight: 500;
 color: #888;
}
.yl-hero-badge-divider {
 width: 1px;
 height: 36px;
 background: #e8e8e8;
 margin: 0 24px 0 0;
 flex-shrink: 0;
}

/* ── Sağ: Swiper Fotoğraf ── */
.yl-hero-right {
 flex: 0 0 50%;
 max-width: 50%;
 position: relative;
 overflow: hidden;
 background: #f5f5f5;
}

.yl-hero-swiper {
 width: 100%;
 height: 100%;
 min-height: 520px;
}

.yl-hero-swiper .swiper-slide {
 height: 100%;
 overflow: hidden;
}

.yl-hero-swiper .swiper-slide img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 object-position: center;
 display: block;
 transition: transform 6s ease;
}

/* Ken Burns efekti */
.yl-hero-swiper .swiper-slide-active img {
 transform: scale(1.06);
}

/* Overlay (sol taraftan hafif geçiş) */
.yl-hero-overlay {
 position: absolute;
 inset: 0;
 background: linear-gradient(to right, rgba(255,255,255,0.15) 0%, transparent 40%);
 z-index: 2;
 pointer-events: none;
}

/* Nav Okları */
.yl-hero-swiper .swiper-button-next,
.yl-hero-swiper .swiper-button-prev {
 width: 48px !important;
 height: 48px !important;
 background: rgba(255,255,255,0.9) !important;
 border-radius: 50%;
 box-shadow: 0 4px 15px rgba(0,0,0,0.15);
 z-index: 10;
 transition: all 0.25s;
}
.yl-hero-swiper .swiper-button-next::after,
.yl-hero-swiper .swiper-button-prev::after {
 display: none !important;
}
.yl-hero-swiper .swiper-button-next i,
.yl-hero-swiper .swiper-button-prev i {
 font-size: 20px;
 color: var(--yl-red);
 display: flex;
 align-items: center;
 justify-content: center;
 width: 100%;
 height: 100%;
}
.yl-hero-swiper .swiper-button-next:hover,
.yl-hero-swiper .swiper-button-prev:hover {
 background: var(--yl-red) !important;
 transform: scale(1.08);
}
.yl-hero-swiper .swiper-button-next:hover i,
.yl-hero-swiper .swiper-button-prev:hover i {
 color: #fff;
}

/* Pagination */
.yl-hero-pagination {
 position: absolute !important;
 bottom: 20px !important;
 z-index: 10;
}
.yl-hero-pagination .swiper-pagination-bullet {
 background: rgba(255,255,255,0.6) !important;
 opacity: 1 !important;
 width: 8px;
 height: 8px;
 transition: all 0.3s;
}
.yl-hero-pagination .swiper-pagination-bullet-active {
 background: #ffffff !important;
 width: 28px !important;
 border-radius: 4px !important;
}

/* Placeholder (fotoğraf yoksa) */
.yl-hero-placeholder {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 gap: 14px;
 height: 100%;
 min-height: 520px;
 background: linear-gradient(135deg, #e01c24 0%, #c41219 100%);
 color: white;
 text-align: center;
 padding: 40px;
}
.yl-hero-placeholder i { font-size: 90px; opacity: 0.6; }
.yl-hero-placeholder span { font-size: 22px; font-weight: 700; }
.yl-hero-placeholder small { font-size: 14px; opacity: 0.8; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 1100px) {
 .yl-hero-left { padding: 50px 40px 50px 30px; }
 .yl-hero-content h1 { font-size: clamp(28px, 4vw, 46px); }
}

@media (max-width: 900px) {
 .yl-hero-inner {
 flex-direction: column;
 min-height: auto;
 }
 .yl-hero-left,
 .yl-hero-right {
 flex: none;
 max-width: 100%;
 width: 100%;
 }
 .yl-hero-right {
 height: auto;
 }
 .yl-hero-swiper,
 .yl-hero-placeholder { min-height: 300px; height: 300px; }
 .yl-hero-left {
 padding: 32px 20px 20px;
 text-align: center;
 }
 .yl-hero-features { justify-content: center; }
 .yl-hero-btns { justify-content: center; }
 .yl-hero-badges { justify-content: center; }
 .yl-hero-content { max-width: 100%; }
 .yl-hero-desc { max-width: 100%; margin-left: auto; margin-right: auto; }
}

@media (max-width: 576px) {
 .yl-hero-swiper,
 .yl-hero-placeholder { min-height: 240px; height: 240px; }
 .yl-hero-content h1 { letter-spacing: -0.5px; }
 .yl-hero-badge-num { font-size: 18px; }
 .yl-hero-badge { padding-right: 8px; }
}

/* -------------------------------------------------------
 5. STATS STRIP (Kırmızı Şerit)
 ------------------------------------------------------- */
.yl-stats {
 background: var(--yl-red);
 padding: 18px 0;
 position: relative;
}
.yl-stats .container {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 20px;
}
.yl-stat-item {
 text-align: center;
 color: var(--yl-white);
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 8px;
 padding: 10px 0;
 border-right: 1px solid rgba(255,255,255,0.2);
}
.yl-stat-item:last-child { border-right: none; }
.yl-stat-icon {
 width: 50px;
 height: 50px;
 background: rgba(255,255,255,0.95);
 color: var(--yl-red);
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 22px;
 box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}
.yl-stat-icon i {
 color: var(--yl-red);
}
.yl-stat-val {
 font-size: 30px;
 font-weight: 800;
 line-height: 1;
}
.yl-stat-text {
 font-size: 13px;
 font-weight: 500;
 opacity: 0.9;
}

@media (max-width: 768px) {
 .yl-stats .container { grid-template-columns: repeat(2, 1fr); }
 .yl-stat-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.2); padding-bottom: 15px; }
 .yl-stat-item:nth-child(3),
 .yl-stat-item:last-child { border-bottom: none; }
}
@media (max-width: 480px) {
 .yl-stats .container { grid-template-columns: 1fr 1fr; }
}

/* -------------------------------------------------------
 6. SECTION GENEL STYLES
 ------------------------------------------------------- */
.yl-section {
 padding: var(--yl-section-py) 0;
}
.yl-section-sm { padding: 32px 0; }
.yl-section-bg { background: #fafafa; }

.yl-section-header {
 margin-bottom: var(--yl-section-header-mb);
}
.yl-section-header.center { text-align: center; }
.yl-section-tag {
 display: inline-block;
 font-size: 13px;
 font-weight: 700;
 color: var(--yl-red);
 text-transform: uppercase;
 letter-spacing: 2px;
 margin-bottom: 6px;
}
.yl-section-title {
 font-size: clamp(26px, 3.5vw, 40px);
 font-weight: 800;
 color: var(--yl-dark);
 line-height: 1.25;
 margin-bottom: 10px;
}
.yl-section-desc {
 font-size: 16px;
 color: var(--yl-gray);
 line-height: 1.7;
 max-width: 650px;
}
.yl-section-header.center .yl-section-desc { margin: 0 auto; }

/* -------------------------------------------------------
 7. HİZMETLER KARTLARI
 ------------------------------------------------------- */
.yl-new-services-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 30px;
}
.yl-new-service-card {
 position: relative;
 border-radius: 20px;
 overflow: hidden;
 background: #ffffff;
 box-shadow: 0 10px 40px rgba(0,0,0,0.06);
 display: block;
 text-decoration: none;
 color: var(--yl-dark);
 min-height: 340px;
 transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
 border: 1px solid rgba(0,0,0,0.04);
}
.yl-new-service-card:hover {
 transform: translateY(-10px);
 box-shadow: 0 25px 50px rgba(224,28,36,0.15);
}
.yl-new-service-bg {
 position: absolute;
 inset: 0;
 background-size: cover;
 background-position: center;
 opacity: 0;
 transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
 z-index: 1;
 transform: scale(1.08);
}
.yl-new-service-card:hover .yl-new-service-bg {
 opacity: 1;
 transform: scale(1);
}
/* Overlay so text is readable on hover */
.yl-new-service-card::after {
 content: '';
 position: absolute;
 inset: 0;
 background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 100%);
 opacity: 0;
 transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
 z-index: 2;
}
.yl-new-service-card:hover::after {
 opacity: 1;
}
.yl-new-service-content {
 position: relative;
 z-index: 3;
 padding: 40px 35px;
 height: 100%;
 display: flex;
 flex-direction: column;
 transition: all 0.5s ease;
}
.yl-new-service-icon {
 width: 65px;
 height: 65px;
 background: #fff5f5;
 color: var(--yl-red);
 border-radius: 18px;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 28px;
 margin-bottom: 25px;
 transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.yl-new-service-card:hover .yl-new-service-icon {
 background: var(--yl-red);
 color: #ffffff;
 transform: translateY(-5px);
 box-shadow: 0 10px 20px rgba(224,28,36,0.3);
}
.yl-new-service-content h3 {
 font-size: 22px;
 font-weight: 800;
 margin-bottom: 15px;
 line-height: 1.35;
 transition: color 0.5s ease;
 color: var(--yl-dark);
}
.yl-new-service-card:hover .yl-new-service-content h3 {
 color: #ffffff;
}
.yl-new-service-content p {
 color: var(--yl-gray);
 font-size: 15px;
 line-height: 1.7;
 margin-bottom: 25px;
 flex: 1;
 transition: color 0.5s ease;
}
.yl-new-service-card:hover .yl-new-service-content p {
 color: rgba(255,255,255,0.85);
}
.yl-new-service-link {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 color: var(--yl-red);
 font-size: 14px;
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: 0.5px;
 transition: all 0.4s ease;
}
.yl-new-service-link i { transition: transform 0.4s; }
.yl-new-service-card:hover .yl-new-service-link {
 color: #ffffff;
 gap: 14px;
}

@media (max-width: 1200px) {
 .yl-new-services-grid { grid-template-columns: repeat(2, 1fr); gap: 25px; }
}
@media (max-width: 768px) {
 .yl-new-services-grid { grid-template-columns: 1fr; gap: 20px; }
 .yl-new-service-content { padding: 30px 25px; }
}

/* -------------------------------------------------------
 8. HİZMET BÖLGELERİ
 ------------------------------------------------------- */
.yl-regions {
 background: var(--yl-white);
}
.yl-regions-inner {
 display: grid;
 grid-template-columns: 1fr 340px;
 gap: 24px;
 min-width: 0;
}
.yl-regions-cities {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 16px;
 margin-top: 16px;
 min-width: 0;
}
.yl-region-col {
 background: #fff;
 border: 1px solid var(--yl-border);
 padding: 25px;
 border-radius: var(--yl-radius);
 box-shadow: 0 4px 15px rgba(0,0,0,0.02);
 min-width: 0;
}
.yl-region-col h4 {
 font-size: 16px;
 font-weight: 700;
 color: var(--yl-dark);
 margin-bottom: 15px;
 padding-bottom: 15px;
 border-bottom: 1px dashed #eee;
 display: flex;
 align-items: center;
 gap: 8px;
}
.yl-region-col h4 i { color: var(--yl-red); }
.yl-region-col ul {
 list-style: none;
 padding: 0;
 margin: 0;
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 10px;
}
.yl-region-col ul li {
 display: flex;
 align-items: center;
 gap: 8px;
 font-size: 14px;
 color: var(--yl-gray);
 padding: 4px 0;
 min-width: 0;
 word-break: break-word;
}
.yl-region-col ul li::before {
 content: '';
 width: 6px;
 height: 6px;
 background: var(--yl-red);
 border-radius: 50%;
 flex-shrink: 0;
}

/* CTA Kutusu */
.yl-region-cta {
 background: var(--yl-red);
 color: var(--yl-white);
 padding: 35px 30px;
 border-radius: var(--yl-radius);
 text-align: center;
 display: flex;
 flex-direction: column;
 justify-content: center;
}
.yl-region-cta i.big-icon {
 font-size: 34px;
 margin-bottom: 15px;
 opacity: 1;
 width: 64px;
 height: 64px;
 border-radius: 50%;
 background: rgba(255,255,255,0.95);
 color: var(--yl-red);
 display: inline-flex;
 align-items: center;
 justify-content: center;
 box-shadow: 0 4px 14px rgba(0,0,0,0.1);
}
.yl-region-cta h3 {
 font-size: 20px;
 font-weight: 700;
 margin-bottom: 10px;
 line-height: 1.3;
}
.yl-region-cta p {
 font-size: 14px;
 opacity: 0.9;
 margin-bottom: 25px;
 line-height: 1.6;
}
.yl-region-cta .yl-btn {
 width: 100%;
 justify-content: center;
 margin-bottom: 10px;
}

/* Region note */
.yl-region-note {
 display: flex;
 align-items: flex-start;
 gap: 10px;
 background: #fff8e1;
 border: 1px solid #ffe082;
 border-left: 4px solid #f59e0b;
 border-radius: 8px;
 padding: 12px 16px;
 margin-top: 25px;
 font-size: 14px;
 color: #555;
 line-height: 1.5;
}
.yl-region-note i {
 color: #f59e0b;
 font-size: 17px;
 flex-shrink: 0;
 margin-top: 1px;
}

@media (max-width: 1024px) {
 .yl-regions-inner { grid-template-columns: 1fr; }
 .yl-region-cta { position: static; }
}
@media (max-width: 768px) {
 .yl-regions-cities {
 grid-template-columns: 1fr;
 gap: 14px;
 }
 .yl-region-col {
 padding: 18px 16px;
 }
 .yl-region-col ul {
 grid-template-columns: 1fr 1fr;
 gap: 8px 12px;
 }
 .yl-regions .yl-section-title,
 .yl-regions .yl-section-desc {
 max-width: 100%;
 word-wrap: break-word;
 }
}
@media (max-width: 480px) {
 .yl-regions-cities { grid-template-columns: 1fr; }
 .yl-region-col ul { grid-template-columns: 1fr; }
 .yl-region-cta { padding: 28px 20px; }
}

/* -------------------------------------------------------
 9. SÜREÇ ADIMLARI
 ------------------------------------------------------- */
.yl-process {
 background: #fafafa;
}
.yl-process-steps {
 display: grid;
 grid-template-columns: repeat(5, 1fr);
 gap: 15px;
 position: relative;
 margin-top: 40px;
}
.yl-process-steps::before {
 content: '';
 position: absolute;
 top: 40px;
 left: 10%;
 right: 10%;
 height: 2px;
 background: linear-gradient(to right, var(--yl-red), #ff8085);
 z-index: 0;
}
.yl-step {
 text-align: center;
 position: relative;
 z-index: 1;
}
.yl-step-num {
 width: 80px;
 height: 80px;
 background: var(--yl-white);
 border: 3px solid var(--yl-red);
 border-radius: 50%;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 margin: 0 auto 18px;
 font-size: 11px;
 font-weight: 700;
 color: var(--yl-red);
 transition: all 0.3s;
 box-shadow: 0 4px 15px rgba(224,28,36,0.15);
}
.yl-step-num i {
 font-size: 24px;
 margin-bottom: 2px;
}
.yl-step-num span {
 font-size: 10px;
 font-weight: 600;
 opacity: 0.7;
}
.yl-step:hover .yl-step-num {
 background: var(--yl-red);
 color: var(--yl-white);
 transform: scale(1.05);
}
.yl-step-title {
 font-size: 15px;
 font-weight: 700;
 color: var(--yl-dark);
 margin-bottom: 8px;
}
.yl-step-desc {
 font-size: 13px;
 color: var(--yl-gray);
 line-height: 1.5;
}

@media (max-width: 992px) {
 .yl-process-steps { grid-template-columns: repeat(3, 1fr); }
 .yl-process-steps::before { display: none; }
}
@media (max-width: 576px) {
 .yl-process-steps { grid-template-columns: 1fr 1fr; }
}

/* -------------------------------------------------------
 10. GALERİ
 ------------------------------------------------------- */
.yl-gallery-grid {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 12px;
}
.yl-gallery-item {
 border-radius: 10px;
 overflow: hidden;
 aspect-ratio: 4/3;
 position: relative;
 cursor: pointer;
}
.yl-gallery-item img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 transition: transform 0.4s;
}
.yl-gallery-item::after {
 content: '\f52a'; /* bi-search */
 font-family: 'bootstrap-icons';
 position: absolute;
 inset: 0;
 background: rgba(224,28,36,0.7);
 color: white;
 font-size: 28px;
 display: flex;
 align-items: center;
 justify-content: center;
 opacity: 0;
 transition: opacity 0.3s;
}
.yl-gallery-item:hover img { transform: scale(1.08); }
.yl-gallery-item:hover::after { opacity: 1; }

@media (max-width: 768px) {
 .yl-gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
 .yl-gallery-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
}

/* -------------------------------------------------------
 11. YORUMLAR (Testimonials)
 ------------------------------------------------------- */
.yl-testimonials { background: var(--yl-white); }
.yl-testimonial-slide {
 background: #fafafa;
 border: 1px solid var(--yl-border);
 border-radius: var(--yl-radius);
 padding: 22px 20px;
 position: relative;
 transition: all 0.3s;
}
.yl-testimonial-slide:hover {
 box-shadow: var(--yl-shadow);
 border-color: var(--yl-red);
}
.yl-stars {
 color: #f59e0b;
 font-size: 16px;
 margin-bottom: 12px;
 letter-spacing: 2px;
}
.yl-testimonial-text {
 font-size: 15px;
 color: var(--yl-gray);
 line-height: 1.7;
 margin-bottom: 20px;
 font-style: italic;
}
.yl-testimonial-author {
 display: flex;
 align-items: center;
 gap: 12px;
}
.yl-author-avatar {
 width: 46px;
 height: 46px;
 background: var(--yl-red);
 color: white;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 font-weight: 700;
 font-size: 18px;
 flex-shrink: 0;
}
.yl-author-name {
 font-weight: 700;
 font-size: 15px;
 color: var(--yl-dark);
}

/* Swiper dots */
.yl-testimonials .swiper-pagination-bullet {
 background: var(--yl-red);
 opacity: 0.3;
 width: 10px;
 height: 10px;
}
.yl-testimonials .swiper-pagination-bullet-active { opacity: 1; }

/* -------------------------------------------------------
 12. CTA BANNER
 ------------------------------------------------------- */
.yl-cta-banner {
 background: var(--yl-red);
 padding: 40px 0;
 position: relative;
 overflow: hidden;
}
.yl-cta-banner::before {
 content: '';
 position: absolute;
 top: -50%;
 right: -10%;
 width: 400px;
 height: 400px;
 background: rgba(255,255,255,0.05);
 border-radius: 50%;
}
.yl-cta-banner::after {
 content: '';
 position: absolute;
 bottom: -30%;
 left: 5%;
 width: 250px;
 height: 250px;
 background: rgba(255,255,255,0.04);
 border-radius: 50%;
}
.yl-cta-inner {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 30px;
 position: relative;
 z-index: 1;
 flex-wrap: wrap;
}
.yl-cta-text h2 {
 font-size: clamp(24px, 3vw, 36px);
 font-weight: 800;
 color: var(--yl-white);
 margin-bottom: 10px;
}
.yl-cta-text p {
 font-size: 16px;
 color: rgba(255,255,255,0.85);
 max-width: 500px;
}
.yl-cta-btns {
 display: flex;
 gap: 12px;
 flex-wrap: wrap;
 flex-shrink: 0;
}

@media (max-width: 768px) {
 .yl-cta-inner { flex-direction: column; text-align: center; }
 .yl-cta-btns { justify-content: center; }
}

/* -------------------------------------------------------
 13. FOOTER
 ------------------------------------------------------- */
.yl-footer {
 background: #111;
 color: #fff;
 padding: 60px 0 0;
}
.yl-footer-grid {
 display: grid;
 grid-template-columns: 2fr 1fr 1.5fr 1.5fr;
 gap: 40px;
 padding-bottom: 50px;
}
.yl-footer-logo {
 height: 72px;
 width: auto;
 max-height: 72px;
 margin-bottom: 18px;
 object-fit: contain;
 filter: brightness(0) invert(1);
}
.yl-footer-about {
 font-size: 14px;
 line-height: 1.8;
 margin-bottom: 20px;
 color: #fff;
}
.yl-footer-social {
 display: flex;
 gap: 10px;
}
.yl-footer-social a {
 width: 38px;
 height: 38px;
 background: rgba(255,255,255,0.08);
 border-radius: 8px;
 display: flex;
 align-items: center;
 justify-content: center;
 color: #fff;
 font-size: 17px;
 text-decoration: none;
 transition: all 0.2s;
}
.yl-footer-social a:hover {
 background: var(--yl-red);
 color: #fff;
}
.yl-footer-col h5 {
 color: #fff;
 font-size: 15px;
 font-weight: 700;
 margin-bottom: 20px;
 position: relative;
 padding-bottom: 12px;
}
.yl-footer-col h5::after {
 content: '';
 position: absolute;
 bottom: 0;
 left: 0;
 width: 35px;
 height: 2px;
 background: var(--yl-red);
}
.yl-footer-links {
 list-style: none;
 padding: 0;
 margin: 0;
}
.yl-footer-links li { margin-bottom: 10px; }
.yl-footer-links a {
 color: #fff;
 text-decoration: none;
 font-size: 14px;
 transition: all 0.2s;
 display: flex;
 align-items: center;
 gap: 8px;
}
.yl-footer-links a:hover { color: rgba(255,255,255,0.85); padding-left: 5px; }
.yl-footer-links a i {
 font-size: 12px;
 color: var(--yl-red);
 flex-shrink: 0;
}

.yl-footer-contact-item {
 display: flex;
 gap: 12px;
 margin-bottom: 14px;
 font-size: 14px;
 color: #fff;
}
.yl-footer-contact-item span {
 color: #fff;
}
.yl-footer-contact-item i {
 color: var(--yl-red);
 font-size: 17px;
 flex-shrink: 0;
 margin-top: 2px;
}
.yl-footer-contact-item a {
 color: #fff;
 text-decoration: none;
}
.yl-footer-contact-item a:hover { color: rgba(255,255,255,0.85); }

.yl-footer-bottom {
 border-top: 1px solid rgba(255,255,255,0.08);
 padding: 20px 0;
}
.yl-footer-bottom .container {
 display: flex;
 align-items: center;
 justify-content: space-between;
 flex-wrap: wrap;
 gap: 10px;
}
.yl-footer-bottom p {
 font-size: 13px;
 color: #fff;
 margin: 0;
}
.yl-footer-bottom a {
 color: #fff;
 text-decoration: none;
 font-size: 13px;
}
.yl-footer-bottom a:hover { color: rgba(255,255,255,0.8); }
.yl-footer-credit {
 color: #fff !important;
 font-weight: 600;
 transition: opacity 0.2s ease;
}
.yl-footer-credit:hover {
 color: #fff !important;
 opacity: 0.85;
}

@media (max-width: 1024px) {
 .yl-footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 576px) {
 .yl-footer-grid { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------
 14. FLOATING BUTTONS (WhatsApp + Tel)
 ------------------------------------------------------- */
.yl-floats {
 position: fixed;
 bottom: 30px;
 right: 20px;
 display: flex;
 flex-direction: column;
 gap: 12px;
 z-index: 9999;
}
.yl-float-btn {
 width: 55px;
 height: 55px;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 24px;
 color: white;
 text-decoration: none;
 box-shadow: 0 4px 20px rgba(0,0,0,0.25);
 transition: all 0.3s;
}
.yl-float-btn:hover {
 transform: scale(1.12);
 color: white;
}
.yl-float-wa { background: #25d366; }
.yl-float-tel { background: var(--yl-red); }

/* -------------------------------------------------------
 15. MOBILE MENU (Slide Panel)
 ------------------------------------------------------- */
.yl-mobile-overlay {
 position: fixed;
 inset: 0;
 background: rgba(0,0,0,0.5);
 z-index: 10000;
 opacity: 0;
 visibility: hidden;
 transition: all 0.3s;
}
.yl-mobile-overlay.active {
 opacity: 1;
 visibility: visible;
}
.yl-mobile-menu {
 position: fixed;
 top: 0;
 left: -100%;
 width: min(320px, 85vw);
 height: 100vh;
 background: var(--yl-white);
 z-index: 10001;
 overflow-y: auto;
 transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1);
 box-shadow: 5px 0 30px rgba(0,0,0,0.15);
}
.yl-mobile-menu.active { left: 0; }
.yl-mob-header {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 20px;
 border-bottom: 1px solid var(--yl-border);
}
.yl-mob-header img {
 height: 64px;
 width: auto;
 max-height: 64px;
 object-fit: contain;
}
.yl-mob-close {
 background: none;
 border: none;
 font-size: 22px;
 cursor: pointer;
 color: var(--yl-dark);
 width: 36px;
 height: 36px;
 border-radius: 8px;
 display: flex;
 align-items: center;
 justify-content: center;
 transition: all 0.2s;
}
.yl-mob-close:hover { background: #f5f5f5; color: var(--yl-red); }
.yl-mob-nav { padding: 20px; }
.yl-mob-nav a {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 13px 0;
 border-bottom: 1px solid #f0f0f0;
 color: var(--yl-dark);
 text-decoration: none;
 font-size: 15px;
 font-weight: 600;
}
.yl-mob-nav a:hover { color: var(--yl-red); }
.yl-mob-sub {
 padding-left: 15px;
 display: none;
}
.yl-mob-sub.open { display: block; }
.yl-mob-sub a {
 font-size: 14px;
 font-weight: 500;
 color: var(--yl-gray);
 padding: 10px 0;
}
.yl-mob-contact {
 padding: 20px;
 border-top: 1px solid var(--yl-border);
 background: #fafafa;
}
.yl-mob-contact .yl-btn {
 width: 100%;
 justify-content: center;
 margin-bottom: 10px;
}

/* -------------------------------------------------------
 16. UTILITY / ORTAK
 ------------------------------------------------------- */
.yl-container-row {
 display: flex;
 align-items: flex-start;
 gap: 50px;
}
.yl-container-row .yl-left { flex: 1; }
.yl-container-row .yl-right { flex: 0 0 380px; }

.yl-show-more-btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 margin: 36px auto 0;
 padding: 14px 32px;
 font-weight: 600;
}

.yl-sehir-hizmet {
 margin-top: 56px;
 padding-top: 48px;
 border-top: 1px solid var(--yl-border, #ececec);
}
.yl-sehir-hizmet-baslik {
 text-align: center;
 max-width: 640px;
 margin: 0 auto 32px;
}
.yl-sehir-hizmet-baslik h3 {
 font-family: var(--yl-font);
 font-size: clamp(22px, 3vw, 30px);
 font-weight: 700;
 color: var(--yl-dark, #1a1a1a);
 margin: 10px 0 8px;
}
.yl-sehir-hizmet-baslik p {
 margin: 0;
 color: var(--yl-gray, #666);
 font-size: 15px;
 line-height: 1.6;
}
.yl-sehir-liste {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 20px;
}
.yl-sehir-kart {
 background: #fff;
 border: 1px solid var(--yl-border, #ececec);
 border-radius: 14px;
 transition: border-color .2s, box-shadow .2s, transform .2s;
}
.yl-sehir-kart:hover {
 border-color: rgba(224, 28, 36, 0.35);
 box-shadow: 0 10px 28px rgba(0,0,0,.06);
 transform: translateY(-2px);
}
.yl-sehir-kart-link {
 display: block;
 padding: 22px 20px 20px;
 text-decoration: none;
 color: inherit;
 height: 100%;
}
.yl-sehir-kart-ikon {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 42px;
 height: 42px;
 border-radius: 10px;
 background: #fff0f0;
 color: var(--yl-red, #e01c24);
 font-size: 18px;
 margin-bottom: 14px;
}
.yl-sehir-kart h4 {
 font-family: var(--yl-font);
 font-size: 17px;
 font-weight: 700;
 color: var(--yl-dark, #1a1a1a);
 margin: 0 0 8px;
 line-height: 1.35;
}
.yl-sehir-kart p {
 margin: 0 0 14px;
 font-size: 13.5px;
 line-height: 1.55;
 color: var(--yl-gray, #666);
 display: -webkit-box;
 -webkit-line-clamp: 3;
 -webkit-box-orient: vertical;
 overflow: hidden;
}
.yl-sehir-kart-cta {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 font-size: 13px;
 font-weight: 600;
 color: var(--yl-red, #e01c24);
}
.yl-sehir-kart-link:hover .yl-sehir-kart-cta i {
 transform: translateX(3px);
}
.yl-sehir-kart-cta i {
 transition: transform .2s;
}
#ylSehirHizmet {
 text-align: center;
}
#ylSehirListe {
 text-align: left;
}
@media (max-width: 992px) {
 .yl-sehir-liste { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 576px) {
 .yl-sehir-hizmet { margin-top: 40px; padding-top: 32px; }
 .yl-sehir-liste { grid-template-columns: 1fr; gap: 14px; }
 .yl-show-more-btn { width: 100%; }
}

/* Swiper nav override */
.swiper-button-next,
.swiper-button-prev {
 color: var(--yl-red) !important;
}
.swiper-pagination-bullet-active {
 background: var(--yl-red) !important;
}

/* AOS custom */
[data-aos] { will-change: transform, opacity; }

/* Responsive container */
@media (max-width: 1200px) {
 .container { max-width: 1100px; }
}
@media (max-width: 768px) {
 .yl-section { padding: 32px 0; }
 .yl-section-header { margin-bottom: 20px; }
}
@media (max-width: 480px) {
 .yl-section { padding: 28px 0; }
}

/* -------------------------------------------------------
 17. BOOTSTRAP ACCORDION OVERRIDES (Kırmızı)
 ------------------------------------------------------- */
.accordion-button:not(.collapsed) {
 color: var(--yl-red) !important;
 background: #fff5f5 !important;
 box-shadow: none !important;
}
.accordion-button:focus {
 box-shadow: 0 0 0 2px rgba(224,28,36,0.15) !important;
}
.accordion-button::after {
 filter: hue-rotate(200deg) saturate(5) brightness(0.6);
}
.accordion-button:not(.collapsed)::after {
 filter: hue-rotate(340deg) saturate(10) brightness(0.6);
}

/* object-fit utility */
.object-fit-cover { object-fit: cover !important; }

/* yl-hero red text */
.yl-hero-content h1 .red,
.yl-hero-content h1 span[style*="color:#e01c24"] {
 color: var(--yl-red) !important;
}

/* Prevent old header/footer styles from overriding */
.modern-header { display: none !important; }
.floating-actions { display: none !important; }
.modern-footer { display: none !important; }

/* Process Grid */
.yl-process-grid {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 18px;
 margin-top: 0;
}
.yl-process-card {
 background: #fff;
 border: 1px solid var(--yl-border);
 padding: 22px 18px;
 border-radius: var(--yl-radius);
 text-align: center;
 transition: all 0.3s;
 position: relative;
 z-index: 1;
}
.yl-process-card:hover {
 transform: translateY(-5px);
 border-color: var(--yl-red);
 box-shadow: 0 10px 30px rgba(224,28,36,0.08);
}
.yl-process-icon {
 width: 70px;
 height: 70px;
 background: #fff0f0;
 color: var(--yl-red);
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 28px;
 margin: 0 auto 14px;
 position: relative;
}
.yl-process-num {
 position: absolute;
 top: -5px;
 right: -5px;
 background: var(--yl-red);
 color: #fff;
 width: 24px;
 height: 24px;
 border-radius: 50%;
 font-size: 12px;
 font-weight: 700;
 display: flex;
 align-items: center;
 justify-content: center;
 border: 2px solid #fff;
}
.yl-process-content h3 {
 font-size: 18px;
 font-weight: 700;
 color: var(--yl-dark);
 margin-bottom: 10px;
}
.yl-process-content p {
 font-size: 14px;
 color: var(--yl-gray);
 line-height: 1.6;
}
@media (max-width: 992px) {
 .yl-process-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 576px) {
 .yl-process-grid { grid-template-columns: 1fr; }
}

/* FAQ accordion font override */
.accordion-button {
 font-family: var(--yl-font) !important;
}

/* Fix Bootstrap btn-primary conflict */
.yl-btn.btn-primary {
 background: var(--yl-red) !important;
 border-color: var(--yl-red) !important;
}

/* -------------------------------------------------------
 13. HİZMET DETAY SAYFASI (sayfa_tur=100)
 ------------------------------------------------------- */

/* Banner */
.yl-svc-banner {
 position: relative;
 background: var(--yl-dark);
 padding: 80px 0;
 min-height: 400px;
 display: flex;
 align-items: center;
 overflow: hidden;
}
.yl-svc-banner-img {
 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;
 z-index: 0;
}
.yl-svc-banner-img img {
 width: 100%;
 height: 100%;
 object-fit: cover;
}
.yl-svc-banner-overlay {
 position: absolute;
 inset: 0;
 background: linear-gradient(90deg, rgba(26,26,26,0.95) 0%, rgba(26,26,26,0.8) 50%, rgba(26,26,26,0.4) 100%);
}
.yl-svc-banner-noimg {
 background: linear-gradient(135deg, var(--yl-dark) 0%, #2a2a2a 100%);
}
.yl-svc-banner-noimg .yl-svc-banner-overlay { display: none; }

.yl-svc-banner-content {
 position: relative;
 z-index: 2;
 color: var(--yl-white);
 max-width: 800px;
}
.yl-breadcrumb {
 margin-bottom: 20px;
 font-size: 14px;
 font-weight: 500;
}
.yl-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
 content: "\F285"; /* bi-chevron-right */
 font-family: bootstrap-icons;
 color: rgba(255,255,255,0.5);
}
.yl-breadcrumb a {
 color: rgba(255,255,255,0.7);
 text-decoration: none;
 transition: color 0.2s;
}
.yl-breadcrumb a:hover { color: var(--yl-white); }
.yl-breadcrumb .active { color: var(--yl-white); }

.yl-svc-banner-content h1 {
 font-size: clamp(32px, 4vw, 48px);
 font-weight: 800;
 margin-bottom: 20px;
 line-height: 1.2;
}
.yl-svc-banner-content p {
 font-size: 18px;
 color: rgba(255,255,255,0.9);
 line-height: 1.6;
 margin-bottom: 30px;
}
.yl-svc-banner-btns {
 display: flex;
 gap: 15px;
 flex-wrap: wrap;
}

/* Detail Section */
.yl-svc-detail {
 padding: 80px 0;
 background: #fafafa;
}
.yl-svc-grid {
 display: grid;
 grid-template-columns: 1fr 350px;
 gap: 50px;
 align-items: start;
}

/* Main Content */
.yl-svc-main {
 background: var(--yl-white);
 padding: 40px;
 border-radius: var(--yl-radius);
 box-shadow: 0 5px 30px rgba(0,0,0,0.04);
}
.yl-svc-features {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: 15px;
 margin-bottom: 40px;
 padding-bottom: 30px;
 border-bottom: 1px solid var(--yl-border);
}
.yl-svc-feat-item {
 display: flex;
 align-items: center;
 gap: 10px;
 font-size: 15px;
 font-weight: 600;
 color: var(--yl-dark);
}
.yl-svc-feat-item i {
 color: var(--yl-red);
 font-size: 20px;
}

.yl-svc-content {
 font-size: 16px;
 line-height: 1.8;
 color: #555;
}
.yl-svc-content h2, .yl-svc-content h3 {
 color: var(--yl-dark);
 margin-top: 35px;
 margin-bottom: 15px;
 font-weight: 700;
}
.yl-svc-content h2 { font-size: 26px; }
.yl-svc-content h3 { font-size: 22px; }
.yl-svc-content ul {
 padding-left: 20px;
 margin-bottom: 25px;
}
.yl-svc-content li { margin-bottom: 10px; }
.yl-svc-content p { margin-bottom: 20px; }

/* Neden Biz */
.yl-svc-why {
 margin-top: 50px;
 padding-top: 40px;
 border-top: 1px solid var(--yl-border);
}
.yl-svc-why h3 {
 font-size: 24px;
 font-weight: 800;
 margin-bottom: 30px;
 display: flex;
 align-items: center;
 gap: 10px;
}
.yl-svc-why h3 i { color: var(--yl-red); }
.yl-svc-why-grid {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: 25px;
}
.yl-svc-why-item {
 display: flex;
 align-items: flex-start;
 gap: 15px;
}
.yl-svc-why-item i {
 font-size: 32px;
 color: var(--yl-red);
 background: #fff0f0;
 width: 60px;
 height: 60px;
 display: flex;
 align-items: center;
 justify-content: center;
 border-radius: 12px;
 flex-shrink: 0;
}
.yl-svc-why-item strong {
 display: block;
 font-size: 16px;
 color: var(--yl-dark);
 margin-bottom: 4px;
}
.yl-svc-why-item span {
 font-size: 14px;
 color: var(--yl-gray);
 line-height: 1.4;
}

/* Sidebar */
.yl-svc-sidebar {
 display: flex;
 flex-direction: column;
 gap: 30px;
 position: sticky;
 top: 100px;
}

/* CTA Box */
/* CTA Box */
.yl-svc-cta-box {
 background: var(--yl-red);
 color: var(--yl-white);
 padding: 35px 30px;
 border-radius: var(--yl-radius);
 text-align: center;
}
.yl-svc-cta-icon {
 width: 70px;
 height: 70px;
 background: rgba(255,255,255,0.95);
 color: var(--yl-red);
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 30px;
 margin: 0 auto 20px;
 box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}
.yl-svc-cta-icon i {
 color: var(--yl-red);
}
.yl-svc-cta-box h4 {
 font-size: 22px;
 font-weight: 800;
 margin-bottom: 15px;
 line-height: 1.3;
}
.yl-svc-cta-box p {
 font-size: 15px;
 opacity: 0.9;
 line-height: 1.6;
 margin-bottom: 25px;
}
.yl-svc-cta-box .yl-btn {
 width: 100%;
 justify-content: center;
 margin-bottom: 12px;
}

/* Sidebar Lists (Areas & Related) */
.yl-svc-areas, .yl-svc-related {
 background: var(--yl-white);
 padding: 30px;
 border-radius: var(--yl-radius);
 box-shadow: 0 5px 25px rgba(0,0,0,0.03);
 border: 1px solid var(--yl-border);
}
.yl-svc-areas h5, .yl-svc-related h5 {
 font-size: 18px;
 font-weight: 700;
 color: var(--yl-dark);
 margin-bottom: 20px;
 display: flex;
 align-items: center;
 gap: 10px;
 padding-bottom: 15px;
 border-bottom: 1px solid #f0f0f0;
}
.yl-svc-areas h5 i, .yl-svc-related h5 i { color: var(--yl-red); }
.yl-svc-areas ul, .yl-svc-related ul {
 list-style: none;
 padding: 0;
 margin: 0;
}
.yl-svc-areas ul li {
 font-size: 14px;
 color: var(--yl-gray);
 padding: 8px 0;
 border-bottom: 1px dashed #eee;
 display: flex;
 align-items: center;
}
.yl-svc-areas ul li::before {
 content: "\F287"; /* bi-check-circle-fill */
 font-family: bootstrap-icons;
 color: var(--yl-red);
 margin-right: 10px;
 font-size: 16px;
}
.yl-svc-related ul li a {
 display: flex;
 align-items: center;
 gap: 10px;
 font-size: 15px;
 font-weight: 500;
 color: var(--yl-gray);
 text-decoration: none;
 padding: 10px 0;
 border-bottom: 1px dashed #eee;
 transition: all 0.2s;
}
.yl-svc-related ul li:last-child a,
.yl-svc-areas ul li:last-child { border-bottom: none; }
.yl-svc-related ul li a:hover { color: var(--yl-red); padding-left: 5px; }
.yl-svc-related ul li a i { color: #ccc; transition: color 0.2s; }
.yl-svc-related ul li a:hover i { color: var(--yl-red); }

/* Responsive Detail */
@media (max-width: 992px) {
 .yl-svc-grid { grid-template-columns: 1fr; gap: 30px; }
 .yl-svc-sidebar { position: static; }
}
@media (max-width: 768px) {
 .yl-svc-main { padding: 25px; }
 .yl-svc-features { grid-template-columns: 1fr; }
 .yl-svc-why-grid { grid-template-columns: 1fr; }
 .yl-svc-banner { padding: 50px 0; min-height: auto; }
}

/* Hakkımızda Sayfası Layout */
.about-section { padding: 80px 0; }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
@media (max-width: 991px) { .about-grid { grid-template-columns: 1fr; } }
.about-content { font-size: 1.1rem; line-height: 1.8; color: #555; }
.about-content h2.about-title { font-size: 2.5rem; font-weight: 800; margin-bottom: 30px; color: #111; }
.about-content h4 { margin-top: 30px; margin-bottom: 15px; font-weight: 700; color: #e01c24; }
.about-content ul { padding-left: 20px; margin-bottom: 20px; }
.about-content ul li { margin-bottom: 10px; }
.about-image { position: relative; }
.about-image img { width: 100%; border-radius: 20px; box-shadow: 0 20px 40px rgba(0,0,0,0.1); }
.badge-experience { position: absolute; bottom: -20px; right: -20px; background: #fff; color: var(--yl-red); border: 1px solid #ffd4d6; padding: 20px 30px; border-radius: 20px; text-align: center; box-shadow: 0 10px 24px rgba(0,0,0,0.1); }
.badge-experience .year { display: block; font-size: 2.5rem; font-weight: 900; line-height: 1; color: var(--yl-red); }
.badge-experience .text { font-size: 0.9rem; font-weight: 600; text-transform: uppercase; color: #555; }

/* Region CTA Box Fix */
.yl-region-cta h3, .yl-region-cta p { color: white !important; }

/* -------------------------------------------------------
 HİZMETLER — Görsel kart grid
 ------------------------------------------------------- */
.yl-hizmet {
 padding: var(--yl-section-py) 0;
 background: #f7f7f7;
}
.yl-hizmet--sayfa {
 padding-top: 40px;
}

.yl-hizmet-baslik {
 text-align: center;
 max-width: 720px;
 margin: 0 auto 26px;
}
.yl-hizmet-crumb {
 max-width: 720px;
 margin: 0 auto 8px;
 text-align: left;
}
.yl-hizmet-etiket {
 display: inline-block;
 font-size: 12px;
 font-weight: 700;
 letter-spacing: 2px;
 text-transform: uppercase;
 color: var(--yl-red);
 margin-bottom: 12px;
}
.yl-hizmet-baslik h1,
.yl-hizmet-baslik h2 {
 font-size: clamp(26px, 3vw, 34px);
 font-weight: 700;
 color: #1a1a1a;
 margin: 0 0 14px;
 line-height: 1.25;
 border: none;
 padding: 0;
}
.yl-hizmet-baslik p {
 font-size: 15px;
 line-height: 1.75;
 color: #666;
 margin: 0;
 padding: 0;
}

.yl-hizmet-liste {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 16px;
}

.yl-hizmet-kart {
 border-radius: 18px;
 overflow: hidden;
 min-height: 260px;
}
.yl-hizmet-kart-link {
 display: block;
 position: relative;
 height: 100%;
 min-height: 260px;
 text-decoration: none;
 color: #fff;
 overflow: hidden;
}
.yl-hizmet-kart-bg {
 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;
 object-fit: cover;
 transition: transform 0.45s ease;
}
.yl-hizmet-kart-bg--bos {
 background: linear-gradient(145deg, #2a2a2a 0%, #1a1a1a 100%);
}
.yl-hizmet-kart-overlay {
 position: absolute;
 inset: 0;
 background: linear-gradient(
 to top,
 rgba(0, 0, 0, 0.88) 0%,
 rgba(0, 0, 0, 0.55) 45%,
 rgba(0, 0, 0, 0.25) 100%
 );
 transition: background 0.35s ease;
}
.yl-hizmet-kart-link:hover .yl-hizmet-kart-bg {
 transform: scale(1.06);
}
.yl-hizmet-kart-link:hover .yl-hizmet-kart-overlay {
 background: linear-gradient(
 to top,
 rgba(0, 0, 0, 0.92) 0%,
 rgba(0, 0, 0, 0.62) 50%,
 rgba(0, 0, 0, 0.35) 100%
 );
}

.yl-hizmet-kart-ust {
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 z-index: 2;
 padding: 20px 22px 0;
}
.yl-hizmet-kart-no {
 font-size: 14px;
 font-weight: 700;
 color: rgba(255, 255, 255, 0.85);
 letter-spacing: 1px;
}

.yl-hizmet-kart-icerik {
 position: absolute;
 left: 0;
 right: 0;
 bottom: 0;
 z-index: 2;
 padding: 22px 24px 24px;
}
.yl-hizmet-kart-icerik h3 {
 font-size: 20px;
 font-weight: 700;
 color: #fff;
 margin: 0 0 8px;
 line-height: 1.3;
}
.yl-hizmet-kart-icerik p {
 font-size: 13px;
 line-height: 1.65;
 color: rgba(255, 255, 255, 0.82);
 margin: 0 0 14px;
 display: -webkit-box;
 -webkit-line-clamp: 2;
 -webkit-box-orient: vertical;
 overflow: hidden;
}
.yl-hizmet-kart-cta {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 font-size: 13px;
 font-weight: 600;
 color: #fff;
 transition: gap 0.25s ease;
}
.yl-hizmet-kart-cta i {
 color: var(--yl-red-light);
 font-size: 14px;
 transition: transform 0.25s ease;
}
.yl-hizmet-kart-link:hover .yl-hizmet-kart-cta {
 gap: 10px;
}
.yl-hizmet-kart-link:hover .yl-hizmet-kart-cta i {
 transform: translateX(3px);
}

.yl-hizmet-alt {
 margin: 22px 0 0;
 font-size: 14px;
 color: #666;
 text-align: center;
}
.yl-hizmet-alt a {
 color: var(--yl-red);
 font-weight: 600;
 text-decoration: none;
}
.yl-hizmet-alt a:hover {
 text-decoration: underline;
}
.yl-hizmet-bos {
 text-align: center;
 color: #888;
 font-size: 15px;
}

@media (max-width: 992px) {
 .yl-hizmet-liste {
 grid-template-columns: repeat(2, 1fr);
 gap: 18px;
 }
}
 @media (max-width: 576px) {
 .yl-hizmet {
 padding: 32px 0 36px;
 }
 .yl-hizmet-liste {
 grid-template-columns: 1fr;
 }
 .yl-hizmet-kart,
 .yl-hizmet-kart-link {
 min-height: 280px;
 }
 .yl-hizmet-kart-icerik h3 {
 font-size: 18px;
 }
}

/* -------------------------------------------------------
 HİZMET DETAY SAYFASI
 ------------------------------------------------------- */
.yl-svc-banner {
 position: relative;
 min-height: 320px;
 background: #1a1a1a;
 color: #fff;
 overflow: hidden;
}
.yl-svc-banner-img {
 position: absolute;
 inset: 0;
}
.yl-svc-banner-img img {
 width: 100%;
 height: 100%;
 object-fit: cover;
}
.yl-svc-banner-noimg {
 background: linear-gradient(135deg, #2a2a2a, #111);
}
.yl-svc-banner-overlay {
 position: absolute;
 inset: 0;
 background: linear-gradient(to top, rgba(0,0,0,0.88), rgba(0,0,0,0.45));
}
.yl-svc-banner-content {
 position: relative;
 z-index: 2;
 padding: 48px 15px 56px;
}
.yl-breadcrumb {
 margin-bottom: 16px;
 font-size: 13px;
 font-weight: 500;
}
.yl-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
 color: rgba(255,255,255,0.45);
}
.yl-breadcrumb a {
 color: rgba(255,255,255,0.85);
 text-decoration: none;
}
.yl-breadcrumb .active {
 color: #fff;
}
.yl-svc-banner-content h1 {
 font-size: clamp(28px, 4vw, 40px);
 font-weight: 700;
 margin: 0 0 12px;
 color: #fff;
}
.yl-svc-banner-content p {
 max-width: 680px;
 color: rgba(255,255,255,0.88);
 margin: 0 0 20px;
 line-height: 1.7;
}
.yl-svc-banner-btns {
 display: flex;
 flex-wrap: wrap;
 gap: 12px;
}

.yl-svc-detail {
 padding: 48px 0 72px;
 background: #f7f7f7;
}
.yl-svc-grid {
 display: grid;
 grid-template-columns: 1fr 320px;
 gap: 28px;
 align-items: start;
}
.yl-svc-main {
 background: #fff;
 border: 1px solid #e5e5e5;
 padding: 28px;
}
.yl-svc-features {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: 12px;
 margin-bottom: 28px;
}
.yl-svc-feat-item {
 display: flex;
 align-items: center;
 gap: 8px;
 font-size: 14px;
 font-weight: 600;
 color: #333;
 background: #fafafa;
 border: 1px solid #eee;
 padding: 12px 14px;
}
.yl-svc-feat-item i {
 color: var(--yl-red);
}
.yl-svc-content {
 line-height: 1.8;
 color: #444;
}
.yl-svc-content h2,
.yl-svc-content h3 {
 color: #222;
 margin: 1.4em 0 0.6em;
}
.yl-svc-why {
 margin-top: 36px;
 padding-top: 28px;
 border-top: 1px solid #eee;
}
.yl-svc-why h3 {
 font-size: 20px;
 margin-bottom: 18px;
 color: #222;
}
.yl-svc-why h3 i {
 color: var(--yl-red);
 margin-right: 8px;
}
.yl-svc-why-grid {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: 14px;
}
.yl-svc-why-item {
 display: flex;
 gap: 12px;
 align-items: flex-start;
 padding: 14px;
 background: #fafafa;
 border: 1px solid #eee;
}
.yl-svc-why-item i {
 color: var(--yl-red);
 font-size: 20px;
 margin-top: 2px;
}
.yl-svc-why-item strong {
 display: block;
 color: #222;
 margin-bottom: 4px;
}
.yl-svc-why-item span {
 font-size: 13px;
 color: #666;
}

.yl-svc-sidebar > div {
 background: #fff;
 border: 1px solid #e5e5e5;
 padding: 22px;
 margin-bottom: 18px;
}
.yl-svc-cta-box {
 background: var(--yl-red) !important;
 color: #fff;
 text-align: center;
}
.yl-svc-cta-box h4,
.yl-svc-cta-box p {
 color: #fff;
}
.yl-svc-cta-icon {
 width: 52px;
 height: 52px;
 margin: 0 auto 12px;
 border-radius: 50%;
 background: rgba(255,255,255,0.15);
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 22px;
}
.yl-svc-cta-box .yl-btn {
 width: 100%;
 justify-content: center;
 margin-top: 8px;
}
.yl-svc-areas h5,
.yl-svc-related h5 {
 font-size: 16px;
 margin-bottom: 12px;
 color: #222;
}
.yl-svc-areas ul,
.yl-svc-related ul {
 list-style: none;
 padding: 0;
 margin: 0;
}
.yl-svc-areas li,
.yl-svc-related li {
 padding: 8px 0;
 border-bottom: 1px solid #f0f0f0;
 font-size: 14px;
 color: #555;
}
.yl-svc-related a {
 color: #333;
 text-decoration: none;
 display: flex;
 align-items: center;
 gap: 6px;
}
.yl-svc-related a:hover {
 color: var(--yl-red);
}
.yl-svc-related a i {
 color: var(--yl-red);
 font-size: 12px;
}

@media (max-width: 992px) {
 .yl-svc-grid {
 grid-template-columns: 1fr;
 }
 .yl-svc-features,
 .yl-svc-why-grid {
 grid-template-columns: 1fr;
 }
}

/* -------------------------------------------------------
 HAKKIMIZDA — editoryal iç sayfa (anasayfa klonu değil)
 ------------------------------------------------------- */
.yl-abt {
 background: #fff;
}
.yl-abt-head {
 padding: 28px 0 24px;
 background: #f8f8f8;
 border-bottom: 1px solid #ececec;
}
.yl-abt-crumb {
 list-style: none;
 padding: 0;
 margin: 0 0 10px;
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
 font-size: 13px;
 color: #888;
}
.yl-abt-crumb li + li::before {
 content: '/';
 margin-right: 8px;
 color: #ccc;
}
.yl-abt-crumb a {
 color: #666;
 text-decoration: none;
}
.yl-abt-crumb a:hover { color: var(--yl-red); }
.yl-abt-crumb li[aria-current="page"] {
 color: #aaa;
 font-weight: 500;
}
.yl-abt-head h1 {
 font-size: clamp(24px, 3vw, 32px);
 font-weight: 800;
 color: var(--yl-dark);
 line-height: 1.2;
 max-width: none;
 margin: 0 0 8px;
 border-left: none;
 padding-left: 0;
}
.yl-abt-head-desc {
 font-size: 15px;
 color: var(--yl-gray);
 line-height: 1.65;
 max-width: 720px;
 margin: 0;
}

/* Hikâye bölümü */
.yl-abt-story {
 padding: 56px 0;
}
.yl-abt-story-grid {
 display: grid;
 grid-template-columns: 420px 1fr;
 gap: 48px;
 align-items: center;
}
.yl-abt-visual {
 position: relative;
}
.yl-abt-photo-main {
 border-radius: 4px 4px 4px 48px;
 overflow: hidden;
 box-shadow: 0 24px 60px rgba(0,0,0,0.14);
}
.yl-abt-photo-main img {
 width: 100%;
 height: 460px;
 object-fit: cover;
 display: block;
}
.yl-abt-photo-accent {
 position: absolute;
 bottom: -20px;
 right: -20px;
 background: var(--yl-dark);
 color: #fff;
 padding: 22px 24px;
 min-width: 140px;
 text-align: center;
}
.yl-abt-years {
 display: block;
 font-size: 36px;
 font-weight: 800;
 color: var(--yl-red);
 line-height: 1;
}
.yl-abt-years-txt {
 font-size: 12px;
 font-weight: 600;
 line-height: 1.4;
 opacity: 0.9;
}
.yl-abt-story-text h2 {
 font-size: 28px;
 font-weight: 800;
 margin-bottom: 16px;
 color: var(--yl-dark);
}
.yl-abt-lead {
 font-size: 17px;
 color: #333;
 line-height: 1.85;
 margin-bottom: 14px;
}
.yl-abt-story-text p {
 color: var(--yl-gray);
 line-height: 1.8;
 margin-bottom: 12px;
}
.yl-abt-facts {
 display: flex;
 gap: 0;
 margin-top: 28px;
 border: 1px solid #e8e8e8;
 border-radius: 8px;
 overflow: hidden;
}
.yl-abt-fact {
 flex: 1;
 padding: 18px 16px;
 text-align: center;
 border-right: 1px solid #e8e8e8;
 background: #fafafa;
}
.yl-abt-fact:last-child { border-right: none; }
.yl-abt-fact strong {
 display: block;
 font-size: 22px;
 font-weight: 800;
 color: var(--yl-red);
 line-height: 1;
 margin-bottom: 6px;
}
.yl-abt-fact span {
 font-size: 12px;
 color: #666;
 font-weight: 500;
}

/* Misyon / vizyon */
.yl-abt-mv {
 padding: 0 0 56px;
}
.yl-abt-mv-grid {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 0;
 border: 1px solid #e5e5e5;
 border-radius: 8px;
 overflow: hidden;
}
.yl-abt-mv-box {
 padding: 40px 36px;
 background: #fff;
}
.yl-abt-mv-box--dark {
 background: var(--yl-dark);
 color: rgba(255,255,255,0.85);
}
.yl-abt-mv-label {
 display: inline-block;
 font-size: 11px;
 font-weight: 700;
 letter-spacing: 2px;
 text-transform: uppercase;
 color: var(--yl-red);
 margin-bottom: 12px;
}
.yl-abt-mv-box--dark .yl-abt-mv-label {
 color: #ff6b72;
}
.yl-abt-mv-box h2 {
 font-size: 22px;
 font-weight: 800;
 margin-bottom: 14px;
 line-height: 1.35;
 color: var(--yl-dark);
}
.yl-abt-mv-box--dark h2 { color: #fff; }
.yl-abt-mv-box--dark p {
 color: rgba(255, 255, 255, 0.9) !important;
}
.yl-abt-mv-box p {
 font-size: 15px;
 line-height: 1.75;
 margin: 0;
}

/* Timeline */
.yl-abt-timeline-wrap {
 padding: 56px 0;
 background: #f4f4f4;
}
.yl-abt-timeline-title {
 font-size: 26px;
 font-weight: 800;
 text-align: center;
 margin-bottom: 8px;
}
.yl-abt-timeline-sub {
 text-align: center;
 color: var(--yl-gray);
 margin-bottom: 40px;
 font-size: 15px;
}
.yl-abt-timeline {
 list-style: none;
 padding: 0;
 margin: 0 auto;
 max-width: 720px;
 position: relative;
}
.yl-abt-timeline::before {
 content: '';
 position: absolute;
 left: 19px;
 top: 8px;
 bottom: 8px;
 width: 2px;
 background: #ddd;
}
.yl-abt-timeline li {
 display: flex;
 gap: 24px;
 padding-bottom: 32px;
 position: relative;
}
.yl-abt-timeline li:last-child { padding-bottom: 0; }
.yl-abt-tl-dot {
 flex-shrink: 0;
 width: 40px;
 height: 40px;
 background: var(--yl-red);
 color: #fff;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 font-weight: 800;
 font-size: 14px;
 position: relative;
 z-index: 1;
 box-shadow: 0 0 0 4px #f4f4f4;
}
.yl-abt-timeline h3 {
 font-size: 17px;
 font-weight: 700;
 margin-bottom: 6px;
 color: var(--yl-dark);
}
.yl-abt-timeline p {
 font-size: 14px;
 color: var(--yl-gray);
 line-height: 1.7;
 margin: 0;
}

/* İçerik + sidebar */
.yl-abt-content {
 padding: 56px 0 72px;
}
.yl-abt-layout {
 display: grid;
 grid-template-columns: 1fr 300px;
 gap: 40px;
 align-items: start;
}
.yl-abt-block {
 margin-bottom: 40px;
 padding-bottom: 36px;
 border-bottom: 1px solid #eee;
}
.yl-abt-block:last-of-type { border-bottom: none; }
.yl-abt-block h2 {
 font-size: 22px;
 font-weight: 800;
 color: var(--yl-dark);
 margin-bottom: 14px;
}
.yl-abt-block p {
 font-size: 15px;
 color: #444;
 line-height: 1.85;
 margin-bottom: 12px;
}
.yl-abt-tags {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
 margin-top: 16px;
}
.yl-abt-tags span {
 font-size: 13px;
 font-weight: 600;
 color: #555;
 background: #f5f5f5;
 border: 1px solid #e8e8e8;
 padding: 6px 12px;
 border-radius: 4px;
}
.yl-abt-dl {
 margin: 16px 0 0;
}
.yl-abt-dl > div {
 padding: 14px 0;
 border-bottom: 1px dashed #e8e8e8;
}
.yl-abt-dl > div:last-child { border-bottom: none; }
.yl-abt-dl dt {
 font-weight: 700;
 color: var(--yl-dark);
 font-size: 15px;
 margin-bottom: 4px;
}
.yl-abt-dl dd {
 margin: 0;
 font-size: 14px;
 color: var(--yl-gray);
 line-height: 1.7;
}
.yl-abt-note a {
 color: var(--yl-red);
 font-weight: 600;
 text-decoration: none;
}
.yl-abt-note a:hover { text-decoration: underline; }
.yl-abt-quote {
 margin: 36px 0 0;
 padding: 28px 32px;
 background: #fff8f8;
 border-left: 4px solid var(--yl-red);
 border-radius: 0 8px 8px 0;
}
.yl-abt-quote p {
 font-size: 18px;
 font-style: italic;
 color: #333;
 line-height: 1.65;
 margin: 0 0 10px;
}
.yl-abt-quote cite {
 font-size: 13px;
 font-style: normal;
 font-weight: 600;
 color: #888;
}

/* Sidebar */
.yl-abt-sidebar {
 position: sticky;
 top: 100px;
}
.yl-abt-side-card {
 background: #fff;
 border: 1px solid #e8e8e8;
 padding: 22px 20px;
 margin-bottom: 16px;
 border-radius: 8px;
}
.yl-abt-side-card--red {
 background: var(--yl-red);
 border-color: var(--yl-red);
 color: #fff;
}
.yl-abt-side-card h3 {
 font-size: 16px;
 font-weight: 700;
 margin-bottom: 10px;
}
.yl-abt-side-card--red h3,
.yl-abt-side-card--red p { color: #fff; }
.yl-abt-side-card p {
 font-size: 13px;
 line-height: 1.6;
 margin-bottom: 14px;
 color: var(--yl-gray);
}
.yl-abt-side-tel,
.yl-abt-side-wa {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 width: 100%;
 padding: 11px 16px;
 border-radius: 6px;
 font-size: 14px;
 font-weight: 700;
 text-decoration: none;
 margin-bottom: 8px;
}
.yl-abt-side-tel {
 background: #fff;
 color: var(--yl-red);
}
.yl-abt-side-wa {
 background: rgba(255,255,255,0.15);
 color: #fff;
 border: 1px solid rgba(255,255,255,0.35);
}
.yl-abt-side-list,
.yl-abt-side-links {
 list-style: none;
 padding: 0;
 margin: 0;
}
.yl-abt-side-list li,
.yl-abt-side-links li {
 font-size: 13px;
 color: #555;
 padding: 8px 0;
 border-bottom: 1px solid #f0f0f0;
 display: flex;
 align-items: flex-start;
 gap: 8px;
}
.yl-abt-side-list li:last-child,
.yl-abt-side-links li:last-child { border-bottom: none; }
.yl-abt-side-list i { color: var(--yl-red); flex-shrink: 0; margin-top: 2px; }
.yl-abt-side-links a {
 color: #333;
 text-decoration: none;
 font-weight: 600;
 display: flex;
 align-items: center;
 gap: 6px;
}
.yl-abt-side-links a:hover { color: var(--yl-red); }
.yl-abt-side-links i { color: var(--yl-red); font-size: 12px; }

@media (max-width: 992px) {
 .yl-abt-story-grid { grid-template-columns: 1fr; gap: 32px; }
 .yl-abt-photo-main img { height: 320px; }
 .yl-abt-photo-accent { right: 10px; bottom: -10px; }
 .yl-abt-mv-grid { grid-template-columns: 1fr; }
 .yl-abt-layout { grid-template-columns: 1fr; }
 .yl-abt-sidebar { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
 .yl-abt-side-card { margin-bottom: 0; }
}
@media (max-width: 576px) {
 .yl-abt-facts { flex-direction: column; }
 .yl-abt-fact { border-right: none; border-bottom: 1px solid #e8e8e8; }
 .yl-abt-fact:last-child { border-bottom: none; }
 .yl-abt-sidebar { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------
 İÇ SAYFA — mobil breadcrumb & başlık (ince)
 ------------------------------------------------------- */
@media (max-width: 768px) {
 .yl-abt-head {
 padding: 12px 0 14px;
 }
 .yl-abt-crumb {
 font-size: 11px;
 gap: 3px 6px;
 margin-bottom: 5px;
 font-weight: 500;
 letter-spacing: 0.01em;
 line-height: 1.35;
 }
 .yl-abt-crumb li + li::before {
 margin-right: 4px;
 color: #ddd;
 }
 .yl-abt-head h1 {
 font-size: 21px;
 font-weight: 700;
 line-height: 1.28;
 margin-bottom: 5px;
 padding-left: 0;
 }
 .yl-abt-head-desc {
 font-size: 13px;
 line-height: 1.55;
 }

 .yl-hizmet--sayfa {
 padding-top: 18px;
 }
 .yl-hizmet-baslik {
 margin-bottom: 18px;
 text-align: left;
 }
 .yl-hizmet-etiket {
 font-size: 10px;
 letter-spacing: 1.2px;
 margin-bottom: 6px;
 }
 .yl-hizmet-baslik h1,
 .yl-hizmet-baslik h2 {
 font-size: 21px;
 font-weight: 700;
 line-height: 1.28;
 margin-bottom: 8px;
 }
 .yl-hizmet-baslik p {
 font-size: 13px;
 line-height: 1.55;
 text-align: left;
 }

 .yl-svc-banner-content {
 padding: 24px 15px 32px;
 }
 .yl-svc-banner-content .yl-breadcrumb,
 .yl-svc-banner-content .breadcrumb {
 font-size: 11px;
 margin-bottom: 8px;
 }
 .yl-svc-banner-content .breadcrumb-item {
 padding-left: 0.35rem;
 }
 .yl-svc-banner-content .breadcrumb-item + .breadcrumb-item::before {
 padding-right: 0.35rem;
 font-size: 10px;
 }
 .yl-svc-banner-content h1 {
 font-size: 22px;
 line-height: 1.25;
 margin-bottom: 8px;
 }
 .yl-svc-banner-content p {
 font-size: 13px;
 line-height: 1.55;
 margin-bottom: 14px;
 }
}

/* FORCING POPPINS GLOBALLY */
body, p, span, div, li, a, h1, h2, h3, h4, h5, h6 {
 font-family: var(--yl-font) !important;
}
.yl-new-service-desc, .yl-new-service-content p {
 font-family: var(--yl-font) !important;
}

/* -------------------------------------------------------
 ANASAYFA — SIKI BOŞLUK (v3.3)
 ------------------------------------------------------- */
.yl-testimonials-pagination {
 margin-top: 12px !important;
 position: relative !important;
 bottom: auto !important;
}
.yl-testimonials-swiper {
 padding-bottom: 2px;
}
.yl-blog-thumb {
 height: 180px;
 overflow: hidden;
 display: block;
}
.yl-region-col {
 padding: 18px;
}
.yl-region-col h4 {
 margin-bottom: 10px;
 padding-bottom: 10px;
}
.yl-region-cta {
 padding: 24px 22px;
}
.yl-stat-item {
 padding: 6px 0;
}
.yl-stat-icon {
 width: 42px;
 height: 42px;
 font-size: 18px;
 background: rgba(255,255,255,0.95);
 color: var(--yl-red);
}
.yl-stat-icon i {
 color: var(--yl-red);
}
.yl-stat-val {
 font-size: 26px;
}
main .yl-section-desc:empty {
 display: none;
 margin: 0;
}

/* -------------------------------------------------------
 BLOG & İLETİŞİM — iç sayfa (eski mavi tema kaldırıldı)
 ------------------------------------------------------- */
.yl-sub {
 background: #fff;
}
.yl-sub-empty {
 text-align: center;
 color: #888;
 padding: 24px 0;
}

.yl-blog-section,
.yl-contact-section {
 padding: 40px 0 48px;
}

.yl-blog-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 20px;
}
.yl-blog-card {
 border: 1px solid #ececec;
 border-radius: 14px;
 overflow: hidden;
 background: #fff;
 transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.yl-blog-card:hover {
 box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
 transform: translateY(-3px);
}
.yl-blog-card-link {
 display: block;
 color: inherit;
 text-decoration: none;
 height: 100%;
}
.yl-blog-card-img {
 height: 190px;
 overflow: hidden;
 background: #f0f0f0;
}
.yl-blog-card-img img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 transition: transform 0.35s ease;
}
.yl-blog-card:hover .yl-blog-card-img img {
 transform: scale(1.04);
}
.yl-blog-card-body {
 padding: 18px 18px 20px;
}
.yl-blog-tag {
 display: inline-block;
 font-size: 11px;
 font-weight: 700;
 letter-spacing: 1px;
 text-transform: uppercase;
 color: var(--yl-red);
 background: #fff0f0;
 border: 1px solid #ffd0d2;
 border-radius: 999px;
 padding: 4px 10px;
 margin-bottom: 10px;
}
.yl-blog-card-body h2 {
 font-size: 17px;
 font-weight: 700;
 line-height: 1.35;
 color: var(--yl-dark);
 margin: 0 0 8px;
}
.yl-blog-card-body p {
 font-size: 14px;
 line-height: 1.65;
 color: #666;
 margin: 0 0 12px;
}
.yl-blog-more {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 font-size: 13px;
 font-weight: 700;
 color: var(--yl-red);
}
.yl-blog-detail {
 max-width: 860px;
 margin: 0 auto;
}
.yl-blog-detail-img {
 width: 100%;
 max-height: 420px;
 object-fit: cover;
 border-radius: 12px;
 margin-bottom: 24px;
 display: block;
}
.yl-blog-detail-body {
 font-size: 16px;
 line-height: 1.85;
 color: #444;
}
.yl-blog-detail-body h2,
.yl-blog-detail-body h3 {
 color: var(--yl-dark);
 margin: 1.4em 0 0.6em;
}

.yl-pager {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 justify-content: center;
 gap: 8px;
 margin-top: 28px;
}
.yl-pager-btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-width: 40px;
 height: 40px;
 padding: 0 12px;
 border-radius: 999px;
 border: 1px solid #e5e5e5;
 background: #fff;
 color: var(--yl-dark);
 font-size: 14px;
 font-weight: 700;
 text-decoration: none;
 transition: all 0.2s ease;
}
.yl-pager-btn:hover {
 border-color: var(--yl-red);
 color: var(--yl-red);
}
.yl-pager-btn.is-active {
 background: var(--yl-red);
 border-color: var(--yl-red);
 color: #fff;
}
.yl-pager-dots {
 color: #999;
 padding: 0 4px;
}

.yl-contact-grid {
 display: grid;
 grid-template-columns: 1.1fr 0.9fr;
 gap: 28px;
 align-items: start;
}
.yl-contact-form-title,
.yl-contact-info-card h2 {
 font-size: 22px;
 font-weight: 800;
 color: var(--yl-dark);
 margin: 0 0 8px;
}
.yl-contact-form-lead,
.yl-contact-info-lead {
 font-size: 15px;
 line-height: 1.7;
 color: #666;
 margin: 0 0 20px;
}
.yl-contact-fields {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 14px;
 margin-bottom: 18px;
}
.yl-field {
 display: flex;
 flex-direction: column;
 gap: 6px;
}
.yl-field--full {
 grid-column: 1 / -1;
}
.yl-field label {
 font-size: 13px;
 font-weight: 600;
 color: #444;
}
.yl-field input,
.yl-field textarea {
 width: 100%;
 border: 1px solid #ddd;
 border-radius: 10px;
 padding: 12px 14px;
 font-family: var(--yl-font);
 font-size: 14px;
 color: var(--yl-dark);
 background: #fff;
 transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.yl-field input:focus,
.yl-field textarea:focus {
 outline: none;
 border-color: var(--yl-red);
 box-shadow: 0 0 0 3px rgba(224, 28, 36, 0.12);
}
.yl-contact-info-card {
 background: #f8f8f8;
 border: 1px solid #ececec;
 border-radius: 14px;
 padding: 24px;
}
.yl-contact-info-item {
 display: flex;
 gap: 12px;
 margin-bottom: 16px;
 font-size: 14px;
 line-height: 1.6;
 color: #555;
}
.yl-contact-info-item i {
 color: var(--yl-red);
 font-size: 18px;
 margin-top: 2px;
 flex-shrink: 0;
}
.yl-contact-info-item strong {
 display: block;
 color: var(--yl-dark);
 margin-bottom: 2px;
}
.yl-contact-info-item a {
 color: var(--yl-red);
 text-decoration: none;
 font-weight: 600;
}
.yl-contact-info-item a:hover {
 text-decoration: underline;
}
.yl-contact-quick {
 display: flex;
 flex-wrap: wrap;
 gap: 10px;
 margin-top: 20px;
}

.yl-map-section {
 padding: 0 0 48px;
 background: #fafafa;
 border-top: 1px solid #ececec;
}
.yl-map-head {
 text-align: center;
 margin-bottom: 16px;
 padding-top: 32px;
}
.yl-map-head h2 {
 font-size: 22px;
 font-weight: 800;
 color: var(--yl-dark);
 margin: 0 0 6px;
}
.yl-map-head p {
 font-size: 14px;
 color: #666;
 margin: 0;
}
.yl-map-wrap {
 border-radius: 12px;
 overflow: hidden;
 border: 1px solid #e5e5e5;
 background: #fff;
}
.yl-map-wrap iframe {
 display: block;
 width: 100%;
 min-height: 380px;
 border: 0;
}

@media (max-width: 992px) {
 .yl-blog-grid { grid-template-columns: repeat(2, 1fr); }
 .yl-contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 576px) {
 .yl-blog-grid { grid-template-columns: 1fr; }
 .yl-contact-fields { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------
   v4.5 — Mobil CTA bar, hero butonları, slider & spacing
   ------------------------------------------------------- */
.yl-btn-wa {
 background: #25d366;
 color: #fff;
 border: 2px solid #25d366;
 box-shadow: 0 4px 14px rgba(37, 211, 102, 0.35);
}
.yl-btn-wa:hover {
 background: #1ebe57;
 border-color: #1ebe57;
 color: #fff;
 transform: translateY(-2px);
 box-shadow: 0 6px 20px rgba(37, 211, 102, 0.45);
}
.yl-btn-wa i {
 font-size: 1.15em;
}
.yl-btn-dark {
 background: var(--yl-dark);
 color: var(--yl-white);
}
.yl-btn-dark:hover {
 background: #000;
 color: var(--yl-white);
 transform: translateY(-2px);
 box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}
button.yl-btn {
 font-family: var(--yl-font);
}

/* Hero buton metinleri — masaüstü / mobil */
.yl-hero-btn-short,
.yl-hero-btn-wa,
.yl-hero-wa-short {
 display: none;
}
.yl-hero-btn-long,
.yl-hero-btn-services,
.yl-hero-wa-long {
 display: inline-flex;
}

/* Tek slayt: ok ve nokta gizle */
.yl-hero-swiper--single .swiper-button-next,
.yl-hero-swiper--single .swiper-button-prev,
.yl-hero-swiper--single .swiper-pagination {
 display: none !important;
}

/* Mobil sabit alt çubuk kaldırıldı — sağ altta yuvarlak float butonlar kullanılır */
.yl-mobile-cta-bar {
 display: none !important;
}
@media (max-width: 767.98px) {
 .yl-floats {
  display: flex !important;
  flex-direction: column;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  right: 16px;
  gap: 10px;
  z-index: 9999;
 }
 .yl-float-btn {
  width: 54px;
  height: 54px;
  font-size: 23px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.22);
 }

 /* Hero: Hemen Ara + WhatsApp (eşit genişlik) */
 .yl-hero-btn-long,
 .yl-hero-btn-services,
 .yl-hero-btn-arrow,
 .yl-hero-wa-long {
  display: none !important;
 }
 .yl-hero-btn-short,
 .yl-hero-btn-wa,
 .yl-hero-wa-short {
  display: inline-flex !important;
 }
 .yl-hero-btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
  margin-bottom: 16px;
  margin-top: 0;
 }
 .yl-hero-btns .yl-hero-btn {
  justify-content: center;
  width: 100%;
  min-height: 48px;
  padding: 11px 10px;
  font-size: 13px;
  font-weight: 700;
  white-space: normal;
  text-align: center;
  line-height: 1.25;
  border-radius: 10px;
 }
 .yl-hero-btns .yl-btn-wa {
  background: #25d366 !important;
  border-color: #25d366 !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.35);
 }
 .yl-hero-btns .yl-btn-wa i {
  font-size: 18px;
 }

 /* Hero + slider spacing */
 .yl-hero-left {
  padding: 24px 16px 16px !important;
 }
 .yl-hero-tag {
  margin-bottom: 10px;
 }
 .yl-hero-content h1 {
  margin-bottom: 10px;
 }
 .yl-hero-desc {
  margin-bottom: 12px;
  font-size: 15px;
 }
 .yl-hero-features {
  margin-bottom: 16px;
  padding-bottom: 0;
  gap: 10px;
  border-bottom: none;
 }
 .yl-hero-right {
  height: auto !important;
  padding: 0 16px 16px;
 }
 .yl-hero-swiper,
 .yl-hero-placeholder {
  min-height: 0 !important;
  height: 280px;
  border-radius: 12px;
  overflow: hidden;
 }
 .yl-hero-overlay {
  display: none;
 }
 .yl-hero-badges {
  padding-top: 10px;
  margin-top: 4px;
  flex-wrap: wrap;
  gap: 8px 0;
 }
 .yl-hero-badge-divider {
  display: none;
 }
 .yl-hero-badge {
  flex: 1 1 30%;
  padding: 0 8px;
  align-items: center;
 }
 .yl-stats {
  margin-top: 0;
 }

 /* Mobil menü: yan yana iki buton */
 .yl-mob-contact-btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
 }
 .yl-mob-contact-btns .yl-btn {
  width: 100%;
  justify-content: center;
  margin-bottom: 0;
  min-height: 44px;
  font-size: 13px;
  padding: 10px 8px;
 }
 .yl-mob-quote-btn {
  width: 100%;
  justify-content: center;
  min-height: 44px;
 }
}

@media (max-width: 576px) {
 .yl-hero-swiper,
 .yl-hero-placeholder {
  height: 240px;
 }
}

@media (min-width: 768px) {
 .yl-hero-btns .yl-hero-btn-wa {
  display: none !important;
 }
 .yl-hero-wa-short { display: none !important; }
 .yl-hero-wa-long { display: inline-flex !important; }
}

/* -------------------------------------------------------
   v4.7 — SSS genişletme, Webioo kredi, ikon tutarlılığı
   ------------------------------------------------------- */
.yl-faq-section {
 background: #fafafa;
}
.yl-faq-accordion .accordion-button {
 font-weight: 600;
 font-size: 15px;
 color: var(--yl-dark);
 padding: 16px 18px;
}
.yl-faq-accordion .accordion-button:not(.collapsed) {
 background: #fff5f5;
 color: var(--yl-red);
 box-shadow: none;
}
.yl-faq-accordion .accordion-button:focus {
 box-shadow: 0 0 0 3px rgba(224,28,36,0.12);
 border-color: transparent;
}
.yl-faq-accordion .accordion-body {
 font-size: 14px;
 line-height: 1.75;
}
.yl-faq-accordion .accordion-body p:last-child {
 margin-bottom: 0;
}
@media (min-width: 992px) {
 .yl-faq-accordion {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
 }
 .yl-faq-accordion .accordion-item {
  margin-bottom: 0 !important;
  height: fit-content;
 }
}

/* -------------------------------------------------------
   v4.9 — Hizmet sayfası hero (LP uyumlu), beyaz 13+ rozeti
   ------------------------------------------------------- */
.yl-svc-hero {
 padding: 24px 0 40px;
 background: linear-gradient(180deg, #fff5f5 0%, #fff 55%);
 overflow: hidden;
}
.yl-svc-crumb {
 margin-bottom: 14px;
}
.yl-svc-crumb ol {
 list-style: none;
 padding: 0;
 margin: 0;
 display: flex;
 flex-wrap: wrap;
 gap: 6px 8px;
 font-size: 12px;
 color: #888;
}
.yl-svc-crumb li + li::before {
 content: '/';
 margin-right: 8px;
 color: #ccc;
}
.yl-svc-crumb a {
 color: #666;
 text-decoration: none;
}
.yl-svc-crumb a:hover { color: var(--yl-red); }
.yl-svc-hero__grid {
 display: grid;
 grid-template-columns: 1.05fr .95fr;
 gap: 36px;
 align-items: center;
}
.yl-svc-hero__copy h1 {
 font-size: clamp(1.6rem, 3.5vw, 2.6rem);
 font-weight: 800;
 line-height: 1.15;
 color: var(--yl-dark);
 margin-bottom: 12px;
}
.yl-svc-hero__desc {
 font-size: 16px;
 line-height: 1.7;
 color: #555;
 margin-bottom: 16px;
 max-width: 560px;
}
.yl-svc-hero__feats {
 display: flex;
 flex-wrap: wrap;
 gap: 10px 16px;
 margin-bottom: 18px;
 padding-bottom: 14px;
 border-bottom: 1px solid #f0f0f0;
}
.yl-svc-hero__feats span {
 display: inline-flex;
 align-items: center;
 gap: 7px;
 font-size: 14px;
 font-weight: 600;
 color: var(--yl-gray);
}
.yl-svc-hero__feats i { color: var(--yl-red); font-size: 17px; }
.yl-svc-hero__btns {
 display: flex;
 gap: 10px;
 flex-wrap: wrap;
}
.yl-svc-hero__btns .yl-btn {
 min-height: 48px;
 border-radius: 10px;
 font-size: 14px;
 font-weight: 700;
}
.yl-svc-hero__btns--mob { display: none; }

.yl-svc-hero__card {
 position: relative;
 border-radius: 14px;
 overflow: hidden;
 box-shadow: 0 24px 60px rgba(0,0,0,.12);
 border: 4px solid #fff;
 outline: 2px solid rgba(224,28,36,.12);
}
.yl-svc-hero__card img {
 width: 100%;
 height: auto;
 min-height: 280px;
 object-fit: cover;
 display: block;
}
.yl-svc-hero__placeholder {
 min-height: 280px;
 display: flex;
 align-items: center;
 justify-content: center;
 background: linear-gradient(135deg, #fff0f0, #f5f5f5);
 font-size: 64px;
 color: var(--yl-red);
 opacity: 0.5;
}
.yl-svc-hero__badge {
 position: absolute;
 bottom: 16px;
 left: 16px;
 background: #fff;
 color: var(--yl-red);
 border: 1px solid #ffd4d6;
 padding: 12px 16px;
 border-radius: 10px;
 text-align: center;
 box-shadow: 0 8px 24px rgba(0,0,0,.1);
}
.yl-svc-hero__badge strong {
 display: block;
 font-size: 22px;
 line-height: 1;
 color: var(--yl-red);
}
.yl-svc-hero__badge span {
 font-size: 11px;
 font-weight: 600;
 color: #555;
}
.yl-svc-hero__stats {
 display: flex;
 gap: 8px;
 margin-top: 12px;
 flex-wrap: wrap;
 justify-content: center;
}
.yl-svc-hero__stats div {
 background: #fff;
 border: 1px solid #eee;
 box-shadow: 0 8px 20px rgba(0,0,0,.06);
 padding: 10px 14px;
 border-radius: 8px;
 text-align: center;
 min-width: 88px;
 flex: 1 1 88px;
}
.yl-svc-hero__stats strong {
 display: block;
 color: var(--yl-red);
 font-size: 16px;
}
.yl-svc-hero__stats span {
 font-size: 10px;
 color: #666;
 font-weight: 600;
}
.yl-svc-hero__actions { display: none; }

/* -------------------------------------------------------
   v5.2 — Hizmet sayfası masaüstü düzen
   ------------------------------------------------------- */
.yl-svc-detail {
 padding: 56px 0 72px;
 background: #f4f5f7;
}
.yl-svc-detail .container {
 max-width: 1280px;
}
.yl-svc-grid {
 grid-template-columns: minmax(0, 1fr) minmax(300px, 340px);
 gap: 32px;
 align-items: start;
}
.yl-svc-main {
 padding: 44px 48px;
 border: 1px solid #ececec;
 min-width: 0;
}
.yl-svc-content > h2:first-child,
.yl-svc-content > h3:first-child {
 margin-top: 0;
}
.yl-svc-why {
 margin-top: 40px;
 padding-top: 36px;
}
.yl-svc-sidebar {
 gap: 22px;
 top: 96px;
}
.yl-svc-areas,
.yl-svc-related {
 padding: 24px 26px;
}
.yl-svc-faq { padding-top: 0; }

@media (min-width: 992px) {
 .yl-svc-hero__stats {
  justify-content: flex-start;
 }
 .yl-svc-hero__grid {
  gap: 48px;
 }
 .yl-svc-why-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
 }
 .yl-svc-why-item {
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 16px;
  background: #fafafa;
  border: 1px solid #eee;
  border-radius: 12px;
  height: 100%;
 }
 .yl-svc-why-item i {
  width: 48px;
  height: 48px;
  font-size: 22px;
 }
 .yl-svc-why-item strong {
  font-size: 15px;
 }
 .yl-svc-why-item span {
  font-size: 13px;
 }
}

@media (min-width: 1200px) {
 .yl-svc-grid {
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 40px;
 }
 .yl-svc-main {
  padding: 48px 56px;
 }
}

@media (max-width: 991px) {
 .yl-svc-hero__grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
 }
 .yl-svc-hero__copy {
  order: 0;
  text-align: left;
 }
 .yl-svc-hero__visual {
  order: 1;
 }
 .yl-svc-hero__btns--desk { display: none; }
 .yl-svc-hero__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  max-width: 100%;
  margin-top: 4px;
 }
 .yl-svc-hero__actions .yl-btn {
  justify-content: center;
  width: 100%;
  min-height: 48px;
 }
 .yl-svc-hero__desc { max-width: none; }
 .yl-svc-hero__feats {
  justify-content: flex-start;
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
  gap: 8px 12px;
 }
 .yl-svc-hero__feats span { font-size: 13px; }
 .yl-svc-hero__stats { margin-top: 8px; }
}
@media (min-width: 992px) {
 .yl-svc-hero__actions { display: none !important; }
}
@media (max-width: 767px) {
 .yl-svc-hero { padding: 16px 0 28px; }
 .yl-svc-hero__card img,
 .yl-svc-hero__placeholder { min-height: 220px; }
}