/*
 * yolyardim — tema stilleri
 *
 * BÖLÜM 1  Tasarım kabuğu — DOC/HTML/*.html içindeki <style> bloklarından
 *          birebir alındı (header, menü, hero, kartlar, galeri, lightbox).
 * BÖLÜM 2  parcailani'den devralınan panel/liste stilleri. Faz 3/5'te yeni
 *          tasarım diline çekilecek; şimdilik çalışır hâlde duruyor.
 *
 * AD ÇAKIŞMASI NOTU: iki taraf da `.nav-link` ve `@keyframes shimmer`
 * kullanıyordu (farklı tanımlarla). Tasarımın adları korundu; devralınan
 * karşılıkları `.panel-nav-link` ve `dusenShimmer` olarak yeniden adlandırıldı.
 * Devralınan ::-webkit-scrollbar / body / img kuralları tasarımdakiyle
 * çakıştığı için çıkarıldı — tasarımınki geçerli.
 */

/* =====================================================================
 * BÖLÜM 1 — TASARIM KABUĞU
 * ================================================================== */


        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'DM Sans', sans-serif; overflow-x: hidden; }

        /* ❗ body `flex flex-col` olduğu için <main> bir FLEX ÖĞESİDİR. Sütun
           ekseninde `mx-auto` (margin-inline:auto) `align-self:stretch`i iptal
           eder: öğe içeriğine göre daralıp ortalanır. İçeriği dar olan
           sayfalarda (ör. Hesabım → Mesajlarım) panel header/footer'dan içeride
           kalıp kayık duruyordu. Genişliği satıra sabitliyoruz; `max-w-7xl`
           tavanı korur, `mx-auto` ortalamayı sürdürür. */
        body > main { width: 100%; }
        h1, h2, h3, h4, h5, h6 { font-family: 'Outfit', sans-serif; }


        /* Card hover */
        .firm-card {
            transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease, border-color 0.3s ease;
        }
        .firm-card:hover {
            transform: translateY(-6px);
            border-color: #9dbdf0;
            box-shadow: 0 20px 40px rgba(0, 71, 204, 0.15);
        }
        /* Görsel ile içerik arasına net bir ayrım */
        .firm-card > a { border-bottom: 1px solid #d5dfee; }

        .city-card {
            transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
        }
        .city-card:hover { transform: translateY(-4px) scale(1.02); }
        .city-card:hover .city-overlay { opacity: 0.5; }
        .city-card:hover .city-name { letter-spacing: 2px; }

        .city-overlay { transition: opacity 0.35s ease; }
        .city-name { transition: letter-spacing 0.35s ease; }

        /* Blog card */
        .blog-card {
            transition: translate 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease, border-color 0.3s ease;
        }
        .blog-card:hover {
            translate: 0 -6px;
            border-color: #9dbdf0;
            box-shadow: 0 22px 44px rgba(0, 71, 204, 0.13);
        }
        .blog-card:hover .blog-img { transform: scale(1.07); }
        .blog-img { transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
        .blog-card .blog-more i { transition: transform 0.25s ease; }
        .blog-card:hover .blog-more i { transform: translateX(4px); }

        /* Adım kartları */
        .step-card {
            transition: translate 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
        }
        .step-card:hover { translate: 0 -5px; box-shadow: 0 22px 44px rgba(0, 71, 204, 0.14); }
        .step-num, .step-ico { transition: background-color 0.3s ease, color 0.3s ease; }
        .step-card:hover .step-num { background-color: #ffc119; color: #0a1628; }
        .step-card:hover .step-ico { background-color: #0068f4; color: #ffffff; }

        /* Scroll reveal */
        .reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
        }
        .reveal.visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* Phone button */
        .phone-btn {
            background: linear-gradient(135deg, #0068f4 0%, #0047cc 100%);
            transition: all 0.3s ease;
        }
        .phone-btn:hover {
            background: linear-gradient(135deg, #ffc119 0%, #e5a800 100%);
            color: #0a1628;
        }


        /* Firma kartı aksiyonları */
        .profile-btn {
            background: linear-gradient(135deg, #0068f4 0%, #0047cc 100%);
            transition: background 0.3s ease, color 0.3s ease;
        }
        .profile-btn:hover {
            background: linear-gradient(135deg, #ffc119 0%, #e5a800 100%);
            color: #0a1628;
        }
        .act-btn { transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease; }
        .act-btn:hover { transform: translateY(-2px); }
        .act-tel { background-color: #e5eeff; color: #0047cc; }
        .act-tel:hover { background-color: #0068f4; color: #ffffff; }
        .act-wa { background-color: #e7f8ee; color: #1da851; }
        .act-wa:hover { background-color: #25d366; color: #ffffff; }

        /* Vitrin badge shimmer */
        @keyframes shimmer {
            0% { background-position: -100% 0; }
            100% { background-position: 200% 0; }
        }
        .vitrin-badge {
            background: linear-gradient(90deg, #ffc119 0%, #ffe580 50%, #ffc119 100%);
            background-size: 200% 100%;
            animation: shimmer 3s ease-in-out infinite;
        }

        /* "Kalın Yazı Renkli Çerçeve" dopingi (Faz 6) — kart sarı çerçeveyle
           öne çıkar. Çerçeve sınıfı Tailwind'den geliyor; buradaki gölge
           vurguyu listede uzaktan da seçilir kılıyor. */
        .yolyardim-cerceve { box-shadow: 0 0 0 1px rgba(255,193,25,.35), 0 6px 18px rgba(255,193,25,.18); }

        /* Dropdown */
        .dropdown { position: relative; }
        .dropdown-menu {
            opacity: 0; visibility: hidden; transform: translateY(8px);
            transition: all 0.25s ease;
        }
        .dropdown:hover .dropdown-menu {
            opacity: 1; visibility: visible; transform: translateY(0);
        }

        /* Mobile accordion */
        .mobile-sub { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
        .mobile-sub.open { max-height: 200px; }

        /* Mobile menu */
        .mobile-menu {
            transform: translateX(100%);
            transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
        }
        .mobile-menu.open { transform: translateX(0); }


        /* --- Şeffaf header: hero zemininin üzerinde durur --- */
        .site-header {
            background: transparent;
            transition: background-color 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease;
        }
        .site-header.is-stuck {
            background: rgba(0, 38, 77, 0.92);
            backdrop-filter: blur(10px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
        }

        /* --- Masaüstü menü linkleri --- */
        .nav-link {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.55rem 0.9rem;
            border-radius: 0.5rem;
            font-size: 1.0625rem;
            font-weight: 500;
            color: rgba(255, 255, 255, 0.9);
            white-space: nowrap;
            transition: color 0.2s ease, background-color 0.2s ease;
        }
        .nav-ico {
            font-size: 0.95rem;
            color: rgba(255, 255, 255, 0.45);
            transition: color 0.2s ease;
        }
        .nav-link:hover { color: #ffc119; background-color: rgba(255, 255, 255, 0.1); }
        .nav-link:hover .nav-ico { color: #ffc119; }
        .nav-link.is-active { color: #ffc119; background-color: rgba(255, 255, 255, 0.1); }
        .nav-link.is-active .nav-ico { color: #ffc119; }
        /* 1024–1279 px arası dar: ikonlar gizlenir, menü tek satırda kalır */
        @media (max-width: 1279px) {
            .nav-ico { display: none; }
            .nav-link { font-size: 1rem; padding: 0.5rem 0.6rem; }
        }

        /* --- Hero başlığı: masaüstünde tek satır --- */
        .hero-title {
            font-size: clamp(1.9rem, 8.4vw, 2.6rem);
            line-height: 1.08;
            letter-spacing: -0.02em;
        }
        .hero-lead { font-size: clamp(1rem, 1.35vw, 1.125rem); }
        @media (min-width: 768px) {
            .hero-title { font-size: clamp(1.75rem, 3.25vw, 3rem); white-space: nowrap; }
            .hero-lead { white-space: nowrap; }
        }

        /* --- Hero alt kenarı: sarı çizgi --- */
        .tread-strip {
            height: 4px;
            background-color: #ffc119;
        }

        /* --- Hizmet kategorisi kutuları --- */
        .service-card {
            position: relative;
            overflow: hidden;
            transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease, border-color 0.3s ease;
        }
        .service-card::before {
            content: '';
            position: absolute;
            left: 0; top: 0;
            width: 100%; height: 3px;
            background: #ffc119;
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
        }
        .service-card:hover {
            transform: translateY(-4px);
            border-color: #c7d8f7;
            box-shadow: 0 18px 34px rgba(0, 71, 204, 0.12);
        }
        .service-card:hover::before { transform: scaleX(1); }
        .service-ico { transition: background-color 0.3s ease, color 0.3s ease; }
        .service-card:hover .service-ico { background-color: #0068f4; color: #ffffff; }
        .service-card--all {
            background-image: linear-gradient(135deg, #0068f4 0%, #0047cc 55%, #00264d 100%);
            border-color: transparent;
        }
        .service-card--all:hover { border-color: #ffc119; box-shadow: 0 18px 34px rgba(0, 71, 204, 0.3); }
        .service-card--all:hover .service-ico { background-color: #ffc119; color: #0a1628; }

        /* --- Öne çıkan arama etiketleri --- */
        .search-chip {
            transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
        }
        .search-chip:hover {
            background-color: #ffc119;
            border-color: #ffc119;
            color: #0a1628;
            transform: translateY(-2px);
        }
        .search-chip:hover .chip-icon { color: #0a1628; }

        /* Klavye odağı — bağlantı ve düğmede sarı halka */
        a:focus-visible, button:focus-visible {
            outline: 2px solid #ffc119;
            outline-offset: 2px;
        }
        /* Form alanlarında sarı halka yok (XG): tıklayınca da çıkıyor ve kötü duruyordu.
           Alanın kendi focus:ring / focus:border sınıfı varsa o geçerli (:where → özgüllük 0);
           yoksa sitenin mavisiyle ince halka. Şeffaf alanlarda (hero / arama penceresi)
           odak, kutunun focus-within çerçevesiyle gösterilir. */
        :where(input, select, textarea):focus-visible {
            outline: none;
        }
        :where(input:not(.bg-transparent):not([type="checkbox"]):not([type="radio"]), select:not(.bg-transparent), textarea):focus-visible {
            border-color: #0068f4;
            box-shadow: 0 0 0 3px rgba(0, 104, 244, 0.15);
        }
        :where(input[type="checkbox"], input[type="radio"]):focus-visible {
            outline: 2px solid rgba(0, 104, 244, 0.45);
            outline-offset: 2px;
        }

        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation-duration: 0.001ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.001ms !important;
            }
            .reveal { opacity: 1; transform: none; }
        }

        /* Scrollbar */
        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: #f1f5f9; }
        ::-webkit-scrollbar-thumb { background: #0068f4; border-radius: 4px; }
    

/* --- alt sayfalara özgü ek kurallar --- */


/* firmalar.html */

/* Alt sayfalar: hero yok, header her zaman dolu zeminde */
        .site-header--solid {
            background: #0047cc;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
        }

/* Menü listesi: tarayıcı çubuğu değişse de taşmaz, kaydırma menüde kalır */
        .mobile-nav {
            max-height: calc(100vh - 64px);
            max-height: calc(100dvh - 64px);
            overscroll-behavior: contain;
        }


/* firma-detay.html */

/* --- Firma detay --- */
        .hero-cta { transition: transform 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease; }

.hero-cta:hover { transform: translateY(-2px); }

.side-cta { transition: transform 0.25s ease, background 0.3s ease, color 0.3s ease; }

.side-cta:hover { transform: translateY(-2px); }

.gal { display: block; }

.gal img { transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }

.gal:hover img { transform: scale(1.06); }

.gal-veil { transition: background-color 0.3s ease; }

.gal:hover .gal-veil { background-color: rgba(10, 22, 40, 0.18); }

.hours-row.today { background-color: #e5eeff; border-radius: 0.5rem; padding-left: 0.75rem; padding-right: 0.75rem; }

.hours-row.today span { color: #0a1628; font-weight: 700; }

.shot-box { background: rgba(0, 26, 53, 0.96); backdrop-filter: blur(6px); }

.shot-box.open { display: flex; }

.shot-box img { box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45); }

body.shot-open { overflow: hidden; }

/* Mobil eylem çubuğu sayfanın sonunu örtmesin.
   KAPSAM DARALTILDI: tasarımda bu kural global yazılmış ama alt çubuk YALNIZ
   firma detayda var. Global bırakılırsa her mobil sayfanın altında 84px ölü
   boşluk kalırdı. WP'nin kendi gövde sınıfıyla kapılandı. */
        @media (max-width: 1023px) {
            body.single-yy_firma { padding-bottom: 5.25rem; }
        }


html { scroll-behavior: smooth; }

/* =====================================================================
 * BÖLÜM 2 — DEVRALINAN PANEL / LİSTE STİLLERİ
 * ================================================================== */

/* Eski `shimmer` — tasarımın vitrin rozeti shimmer'ıyla çakışmasın diye
   yeniden adlandırıldı. Yalnız .btn-dusen kullanıyor. */
@keyframes dusenShimmer { 0% { left: -100%; } 100% { left: 100%; } }

/* Panel kenar çubuğu (eski .nav-link — tasarımın header .nav-link'iyle
   çakışmasın diye yeniden adlandırıldı; page-hesabim.php güncellendi). */

/* Sidebar aktif durum */
.panel-nav-link { border-left: 3px solid transparent; transition: all 0.15s ease-in-out; }
.panel-nav-link:hover { background-color: #f9fafb; }
/* Faz 2 paleti. Buradaki #dc2626 eski parcailani kimliğinden kalmıştı ve
   mavi tasarımın içinde tek başına kırmızı bir menü öğesi basıyordu. */
.panel-nav-link.active { background-color: #e5eeff; color: #0047cc; border-left-color: #0047cc; font-weight: 600; }
.panel-nav-link.active .nav-icon { color: #0047cc; }

@media (max-width: 767px) { body { padding-bottom: 80px; } }
.line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Font Awesome ikonları Tailwind w-*/h-* kutularıyla birlikte kullanılıyor
   (devralınan işaretlemeden geliyor). Kutu içinde ortalansınlar.
   `:not(.hidden)` ŞART: FA'nın kendi `display:inline-block` kuralı Tailwind'in
   `hidden` sınıfını ezer; burada inline-flex verirsek gizlenmesi gereken ikon
   görünür kalırdı. */
i.fas:not(.hidden), i.far:not(.hidden), i.fab:not(.hidden),
i.fa-solid:not(.hidden), i.fa-regular:not(.hidden), i.fa-brands:not(.hidden) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	vertical-align: middle;
}/* ---- Acil Satılık — alev arkaplan animasyonu ---- */
@keyframes flameGlow {
	0%, 100% { box-shadow: 0 0 8px rgba(239,68,68,0.5), 0 0 20px rgba(251,146,60,0.3), inset 0 0 15px rgba(239,68,68,0.2); }
	33% { box-shadow: 0 0 12px rgba(251,146,60,0.6), 0 0 30px rgba(239,68,68,0.4), inset 0 0 20px rgba(251,146,60,0.3); }
	66% { box-shadow: 0 0 10px rgba(239,68,68,0.7), 0 0 25px rgba(251,191,36,0.3), inset 0 0 18px rgba(239,68,68,0.25); }
}
@keyframes fireIcon {
	0%, 100% { transform: scale(1) rotate(0deg); }
	25% { transform: scale(1.2) rotate(-4deg); }
	50% { transform: scale(1.1) rotate(3deg); }
	75% { transform: scale(1.25) rotate(-3deg); }
}
.btn-acil {
	background: linear-gradient(135deg, #dc2626, #b91c1c, #991b1b);
	animation: flameGlow 2s ease-in-out infinite;
	position: relative; overflow: hidden;
}
.btn-acil::before {
	content: ''; position: absolute; top: -50%; left: -50%;
	width: 200%; height: 200%;
	background: radial-gradient(ellipse at center, rgba(239,68,68,0.2) 0%, transparent 70%);
}
.btn-acil:hover { transform: scale(1.03); filter: brightness(1.1); }
.btn-acil .fire-icon { animation: fireIcon 0.8s ease-in-out infinite; display: inline-block; position: relative; z-index: 1; }
.btn-acil span:last-child { position: relative; z-index: 1; }
/* ---- Fiyatı Düşenler — düşen ok animasyonu ---- */
@keyframes arrowFall {
	0% { transform: translateY(-8px); opacity: 0; }
	50% { transform: translateY(0); opacity: 1; }
	100% { transform: translateY(8px); opacity: 0; }
}
@keyframes pulseYellow {
	0%, 100% { box-shadow: 0 0 0 0 rgba(234,179,8,0.5); }
	50% { box-shadow: 0 0 0 8px rgba(234,179,8,0); }
}
.btn-dusen {
	background: linear-gradient(135deg, #111827, #1f2937, #374151);
	border: 2px solid #eab308;
	animation: pulseYellow 2s ease-in-out infinite;
	position: relative; overflow: hidden;
}
.btn-dusen::before {
	content: ''; position: absolute; top: 0; left: -100%;
	width: 100%; height: 100%;
	background: linear-gradient(90deg, transparent, rgba(234,179,8,0.1), transparent);
	animation: dusenShimmer 2.5s ease-in-out infinite;
}
.btn-dusen:hover { transform: scale(1.03); border-color: #facc15; background: linear-gradient(135deg, #1f2937, #374151, #4b5563); }
.btn-dusen .down-icon { animation: arrowFall 1.2s ease-in-out infinite; display: inline-block; color: #facc15; position: relative; z-index: 1; }
.btn-dusen .btn-text { position: relative; z-index: 1; }
/* ---- Galeri (detay) ---- */
.gallery-thumb { transition: all 0.2s; }
.gallery-thumb.active, .gallery-thumb:hover { border-color: #0047cc; opacity: 1; }
/* ---- Hesabım paneli tip ölçeği (okunabilirlik kritik) ---- */
/* Firma ekleme sihirbazı — gezinme çubuğu her zaman gövdenin dibinde.
   Taban yükseklik DENENDİ ve GERİ ALINDI: kısa adımlarda altta koca bir boşluk
   bırakıyordu. Kutu adımın içeriği kadar yüksek olsun; sabit olan yalnız
   genişlik (kart `max-w-3xl`). */
.yolyardim-sihirbaz { display: flex; flex-direction: column; }
.yolyardim-sihirbaz > .yolyardim-sihirbaz-nav { margin-top: auto; }

.panel-wrap { font-size: 16px; line-height: 1.55; }
.panel-wrap .text-xs   { font-size: 0.8125rem; line-height: 1.15rem; }
/* 13px */
.panel-wrap .text-sm   { font-size: 0.9375rem; line-height: 1.4rem;  }
/* 15px */
.panel-wrap .text-base { font-size: 1.0625rem; line-height: 1.55rem; }
/* 17px */
.panel-wrap .text-lg   { font-size: 1.1875rem; line-height: 1.7rem;  }
/* 19px */
.panel-wrap .text-xl   { font-size: 1.375rem;  line-height: 1.85rem; }
/* 22px */
.panel-wrap .text-2xl  { font-size: 1.625rem;  line-height: 2rem;    }
/* 26px */
.panel-wrap .text-3xl  { font-size: 2rem;      line-height: 2.35rem; }
/* 32px */
.panel-wrap .text-\[10px\] { font-size: 11.5px; line-height: 1.15; }
.panel-wrap .text-\[11px\] { font-size: 12.5px; line-height: 1.2; }
.stat-card { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 10px 25px -10px rgba(0,0,0,0.08); }
.tab-panel { display: none; }
.tab-panel.active { display: block; animation: yolyardimFadeIn 0.25s ease; }
@keyframes yolyardimFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
/* Gönderim bekleme ikonu (ilan önizleme onayı) — Tailwind animate-spin'e
   bağlı kalmadan çalışsın diye kendi kuralımız. */
.yolyardim-donen { animation: yolyardimDonme 1s linear infinite; transform-origin: 50% 50%; }
@keyframes yolyardimDonme { to { transform: rotate(360deg); } }
/* Durum rozetleri */
.badge-yayinda { background: #dcfce7; color: #166534; }
.badge-onayda  { background: #fef9c3; color: #854d0e; }
.badge-pasif   { background: #f3f4f6; color: #374151; }
.badge-red     { background: #fee2e2; color: #991b1b; }
.unread-dot { width: 8px; height: 8px; background: #dc2626; border-radius: 9999px; box-shadow: 0 0 0 4px rgba(220,38,38,0.15); flex-shrink: 0; }
/* Faz 2 paleti: halka eskiden parcailani kırmızısı → turuncu gradyanıydı. */
.avatar-ring { background: conic-gradient(from 160deg, #0047cc, #ffc119, #0047cc); padding: 3px; border-radius: 9999px; display: inline-block; line-height: 0; }
.avatar-ring img { display: block; }
.pg-btn { width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center; }
@media (min-width: 768px) {
	.mesaj-grid { min-height: 600px; }
	.mesaj-list { max-height: 600px; overflow-y: auto; }
	.mesaj-detay { height: 600px; }
}
@media (max-width: 767px) {
	.mesaj-list { max-height: 340px; overflow-y: auto; }
	.mesaj-detay-body { max-height: 420px; }
}
/* Kategori Vitrini dopingi — vitrin & alt liste hafif yeşil arkaplan.
   !important: Tailwind CDN runtime bg-white/hover:bg-gray-50 utility'leri
   tema CSS'inden sonra üretildiği için tema kuralı aksi halde eziliyor. */
.yolyardim-vitrin-yesil { background-color: #f0fdf4 !important; border-color: #86efac !important; }
.yolyardim-vitrin-yesil:hover { background-color: #dcfce7 !important; }
/* Kalın Yazı Renkli Çerçeve dopingi (kategori listesinde) — ikisi birden aktifse cerceve sarısı kazansın */
.yolyardim-doping-cerceve { background: #fffbeb; border-color: #f59e0b !important; }
.yolyardim-doping-cerceve:hover { background: #fef3c7; }
.yolyardim-doping-cerceve .yolyardim-ilan-baslik { font-weight: 700; }
/* Blog / yazı içeriği tipografisi (Tailwind preflight'ı geri kazandırır) */
.yolyardim-icerik h1 { font-size: 1.875rem; line-height: 1.25; font-weight: 800; color: #111827; margin: 1.6rem 0 .8rem; }
.yolyardim-icerik h2 { font-size: 1.5rem; line-height: 1.3; font-weight: 700; color: #111827; margin: 1.5rem 0 .7rem; }
.yolyardim-icerik h3 { font-size: 1.25rem; line-height: 1.35; font-weight: 700; color: #1f2937; margin: 1.3rem 0 .6rem; }
.yolyardim-icerik h4 { font-size: 1.1rem; font-weight: 700; color: #1f2937; margin: 1.1rem 0 .5rem; }
.yolyardim-icerik p { margin: 0 0 1rem; }
.yolyardim-icerik strong, .yolyardim-icerik b { font-weight: 700; color: #111827; }
.yolyardim-icerik em, .yolyardim-icerik i { font-style: italic; }
.yolyardim-icerik u { text-decoration: underline; }
.yolyardim-icerik ul { list-style: disc; padding-left: 1.5rem; margin: 0 0 1rem; }
.yolyardim-icerik ol { list-style: decimal; padding-left: 1.5rem; margin: 0 0 1rem; }
.yolyardim-icerik li { margin: .3rem 0; }
/* İçerik bağlantıları site paletinde (eskiden parcailani kırmızısıydı).
   `.btn-acil` ve okunmamış noktası bilinçli olarak kırmızı kaldı: ikisi de
   kimlik değil, ANLAM taşıyor (acil hizmet / okunmamış). */
.yolyardim-icerik a { color: #0047cc; text-decoration: underline; }
.yolyardim-icerik a:hover { color: #0068f4; }
.yolyardim-icerik blockquote { border-left: 4px solid #e5e7eb; padding: .25rem 0 .25rem 1rem; margin: 0 0 1rem; color: #6b7280; font-style: italic; }
.yolyardim-icerik img { max-width: 100%; height: auto; border-radius: .5rem; margin: 1rem 0; }
/* Görsel/medya konteynerlerini de kapsamla — figure'a (klasik/Gutenberg) inline
   width verilmişse mobilde img max-width:100% figure'ın %'si olup taşıyordu. */
.yolyardim-icerik figure { max-width: 100%; height: auto; margin: 1rem 0; }
.yolyardim-icerik figure img { margin: 0; }
.yolyardim-icerik figcaption { font-size: .875rem; color: #6b7280; margin-top: .4rem; text-align: center; }
.yolyardim-icerik iframe,
.yolyardim-icerik video,
.yolyardim-icerik embed,
.yolyardim-icerik object { max-width: 100%; }
.yolyardim-icerik table { width: 100%; border-collapse: collapse; margin: 0 0 1rem; }
.yolyardim-icerik th, .yolyardim-icerik td { border: 1px solid #e5e7eb; padding: .5rem .75rem; text-align: left; }
.yolyardim-icerik hr { border: 0; border-top: 1px solid #e5e7eb; margin: 1.5rem 0; }
.yolyardim-icerik > *:first-child { margin-top: 0; }
.yolyardim-icerik > *:last-child { margin-bottom: 0; }
/* İlan galeri lightbox (kendi kodumuz — telifsiz, harici kütüphane yok) */
.yolyardim-galeri-ac { position: relative; display: block; width: 100%; height: 100%; padding: 0; margin: 0; border: 0; background: transparent; cursor: zoom-in; }
.yolyardim-galeri-ipucu { position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; background: rgba(15,17,21,.62); color: #fff; font-size: 14px; font-weight: 600; padding: 7px 13px; border-radius: 9999px; opacity: 0; transform: translateY(5px); transition: opacity .18s ease, transform .18s ease; pointer-events: none; backdrop-filter: blur(3px); }
.yolyardim-galeri-ipucu svg { width: 16px; height: 16px; }
.yolyardim-galeri-sarmal:hover .yolyardim-galeri-ipucu,
.yolyardim-galeri-ac:focus-visible .yolyardim-galeri-ipucu { opacity: 1; transform: translateY(0); }
.yolyardim-lb { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(15,17,21,.94); opacity: 0; visibility: hidden; transition: opacity .22s ease, visibility .22s ease; }
.yolyardim-lb.acik { opacity: 1; visibility: visible; }
.yolyardim-lb__img { max-width: 92vw; max-height: 86vh; object-fit: contain; border-radius: 10px; box-shadow: 0 14px 44px rgba(0,0,0,.55); user-select: none; -webkit-user-drag: none; transition: opacity .15s ease; }
.yolyardim-lb__btn { position: absolute; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 0; border-radius: 9999px; background: rgba(255,255,255,.12); color: #fff; cursor: pointer; backdrop-filter: blur(4px); transition: background .15s ease, transform .12s ease; }
.yolyardim-lb__btn:hover { background: rgba(255,255,255,.24); }
.yolyardim-lb__btn:active { transform: scale(.93); }
.yolyardim-lb__btn svg { width: 24px; height: 24px; }
.yolyardim-lb__kapat { top: 18px; right: 18px; }
.yolyardim-lb__onceki { left: 18px; top: 50%; transform: translateY(-50%); }
.yolyardim-lb__sonraki { right: 18px; top: 50%; transform: translateY(-50%); }
.yolyardim-lb__onceki:active, .yolyardim-lb__sonraki:active { transform: translateY(-50%) scale(.93); }
.yolyardim-lb__sayac { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,.5); color: #fff; font-size: 14px; font-weight: 600; padding: 6px 14px; border-radius: 9999px; }
@media (max-width: 640px) {
	.yolyardim-lb { padding: 12px; }
	.yolyardim-lb__btn { width: 42px; height: 42px; }
	.yolyardim-lb__onceki { left: 8px; }
	.yolyardim-lb__sonraki { right: 8px; }
	.yolyardim-lb__kapat { top: 10px; right: 10px; }
}
/* Üyelik paketi seçim kartları (Faz 6 — paket + süre iki katman).
   Renkler Faz 2 paletinden; burada kalan kırmızı tonlar eski parcailani
   artığıydı ve yeni tasarımın içinde tek başına kırmızı çerçeve basıyordu. */
.yolyardim-paket-kart:hover { border-color: #c7d8f7; }
.yolyardim-paket-kart.secili { border-color: #0047cc; background: #e5eeff; box-shadow: 0 1px 6px rgba(0,71,204,.12); }
.yolyardim-paket-sure { display: none; }

/* Değerlendirme yıldız seçici (Faz 7).
   Kap `flex-row-reverse` olduğu için 5'ten 1'e doğru diziliyor; böylece
   "seçilenin ÖNCEKİ kardeşleri" CSS'te ~ ile yakalanabiliyor ve saf CSS ile
   hover/seçim boyaması çalışıyor (JS gerekmiyor). */
.yolyardim-yildiz label { color: #d5dfee; transition: color .15s ease; }
.yolyardim-yildiz input:checked ~ label,
.yolyardim-yildiz label:hover,
.yolyardim-yildiz label:hover ~ label { color: #ffc119; }
.yolyardim-yildiz input:focus-visible + label { outline: 2px solid #0068f4; outline-offset: 2px; border-radius: 4px; }
.yolyardim-paket-sure.acik { display: block; }
/* -------------------------------------------------------------------------
 * Anasayfa "Keşfet" çip bulutu (Bölüm 127)
 * Kırpma ve buton YALNIZ JS ölçüm yaptıktan sonra devreye girer:
 * JS kapalıysa tüm çipler görünür, ölü bir "Daha Fazla Gör" kalmaz.
 * Tailwind'in display utility'leri (hidden/inline-flex) bilerek kullanılmadı —
 * CDN style'ı head sonunda üretildiği için display çakışması riski var.
 * ---------------------------------------------------------------------- */

/* =====================================================================
 * YÖNETİM TABLOLARI — masaüstünde tablo, MOBİLDE KART
 *
 * Dar ekranda 5–7 sütunlu bir tablo ya yatay kayar ya da hücreleri
 * birbirine girer. `.yy-tablo` altında her satır bir karta, her hücre
 * "Etiket : değer" satırına dönüşür. Etiket `data-etiket` özniteliğinden
 * gelir; olmayan hücrede yalnız değer basılır (kırılmaz).
 * ================================================================== */
@media (max-width: 767px) {
	.yy-tablo, .yy-tablo tbody, .yy-tablo tr, .yy-tablo td { display: block; width: 100%; }
	.yy-tablo thead, .yy-tablo colgroup, .yy-tablo col { display: none; }
	/* Sabit sütun genişlikleri yalnız masaüstünde geçerli. */
	.yy-tablo.md\:table-fixed { table-layout: auto; }
	.yy-tablo tbody { border: 0; }
	.yy-tablo tr {
		border: 1px solid #d5dfee;
		border-radius: 1rem;
		padding: 0.25rem 1rem;
		margin-bottom: 0.875rem;
		background: #fff;
	}
	.yy-tablo td {
		padding: 0.625rem 0 !important;
		border-bottom: 1px solid #f3f4f6;
		text-align: left !important;
		white-space: normal !important;
	}
	.yy-tablo tr td:last-child { border-bottom: 0; }
	.yy-tablo td[data-etiket]::before {
		content: attr(data-etiket);
		display: block;
		font-size: 0.8125rem;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: .03em;
		color: #9ca3af;
		margin-bottom: 0.25rem;
	}
	/* Hücre içindeki sağa yaslı aksiyon grupları sola döner. */
	.yy-tablo td > .justify-end { justify-content: flex-start; }
	/* Kart görünümünde yatay kaydırmaya gerek kalmaz. */
	.yy-tablo-kap { overflow-x: visible; }
}

/* Yönetim tablosu hücre metni.
   `table-fixed` + uzun KESİNTİSİZ metin (68 karakterlik ad, uzun e-posta)
   hücreden taşıp komşu sütunun üstüne biniyordu: Tailwind'in `break-words`
   (overflow-wrap: break-word) tek parça kelimeyi kırmaya yetmiyor.
   `anywhere` + `break-word` ikilisi kırmayı garantiler; satır kırpma da
   bir satırın komşularından üç kat uzun olmasını engeller (tam değer
   `title` özniteliğinde durur). */
.yy-hucre { overflow-wrap: anywhere; word-break: break-word; }
.yy-kirp-1, .yy-kirp-2 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	overflow-wrap: anywhere;
	word-break: break-word;
}
.yy-kirp-1 { -webkit-line-clamp: 1; }
.yy-kirp-2 { -webkit-line-clamp: 2; }

/* Firmalarım — mobilde işlem düğmeleri iki sütun ızgarada, hücreyi doldurur.
   Vitrin düğmesi <form> içinde olduğu için formun kendisi de hücreyi doldurmalı. */
@media (max-width: 639px) {
	.yy-firma-islem > a,
	.yy-firma-islem > button,
	.yy-firma-islem > form,
	.yy-firma-islem > form > button { width: 100%; justify-content: center; }
	/* Tek sayıda düğmede sonuncusu tam satır — yarım hücrede yalnız kalmasın. */
	.yy-firma-islem > :last-child:nth-child(odd) { grid-column: span 2; }
}

/* Bildirim listesi — okunmamış satır: ince sol çizgi + çok hafif zemin.
   (Eskiden tam mavi zemindi; hepsi okunmamışken liste tek bir mavi blok oluyordu.) */
.yolyardim-bildirim.yy-okunmamis { background: rgba(229, 238, 255, .45); box-shadow: inset 3px 0 0 #0047cc; }

/* Firma detay: favori düğmesi */
.yy-fav-kutu { background: #fff; border-color: #d5dfee; color: #00307f; }
.yy-fav-kutu:hover { border-color: #e11d48; color: #e11d48; }
.yy-fav-kutu .fa-heart { color: #e11d48; }
.yy-fav-kutu.is-fav { background: #fff1f3; border-color: #fecdd6; color: #be123c; }
.yy-fav-kutu:disabled { opacity: .7; cursor: wait; }

/* Hesabım: bölüm ara başlıkları (etiket + ince çizgi) */
.yy-ara-baslik { display: flex; align-items: center; gap: .75rem; margin-bottom: .5rem; font-size: .875rem; font-weight: 700; letter-spacing: .05em; color: #0047cc; }
.yy-ara-baslik::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(0, 71, 204, .45), rgba(0, 71, 204, .08)); }

/* Yönetim sekmeleri: dar ekranda yatay ray (kaydırma çubuğu gizli) */
.yy-sekme-ray { scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.yy-sekme-ray::-webkit-scrollbar { display: none; }

/* Üyeler tablosu: mobil kartta kısa alanlar iki sütun */
@media (max-width: 767px) {
	.yy-tablo-kompakt tr { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1rem; }
	.yy-tablo-kompakt td:first-child, .yy-tablo-kompakt td:last-child { grid-column: 1 / -1; }
	.yy-tablo-kompakt td:last-child { border-top: 1px solid #f3f4f6; }
	.yy-tablo-kompakt td { border-bottom: 0; }
	.yy-tablo-kompakt td:first-child { border-bottom: 1px solid #f3f4f6; }
}