body {
    background: #f4f6f9;
    font-family: 'Montserrat', sans-serif;
    color: #222;
}

.page-container {
    max-width: 1400px;
    margin: 30px auto;
    padding: 0 20px;
}

.category-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(6px);
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    border-radius: 10px;
    z-index: 20;
    box-shadow: 0 4px 10px rgba(0,0,0,0.25);
    text-shadow: 0 1px 3px rgba(0,0,0,0.55);
    border: 1px solid rgba(255,255,255,0.18);
}

/* SOL MENÜ */
.left-menu {
    width: 170px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 16px 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

.left-menu h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 14px;
    color: #a40000ff;
}

.cat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 4px;
    border-bottom: 1px solid #f1f5f9;
}
.cat-row:last-child { border-bottom: none; }

.cat-row a.cat-name {
    font-size: 16px;
    color: #000000ff;
    font-weight: 600;
    text-decoration: none;
}

.cat-row .cat-count {
    font-size: 14px;
    color: #94a3b8;
    font-weight: 500;
}

/* BANNER */
.banner-wrapper {
    display: flex;
    gap: 22px;
    margin-bottom: 40px;
}
.banner-wrapper {
    display: flex;
    gap: 22px;
    margin-bottom: 40px;
}

.banner-slider {
    flex: 1;
    position: relative;
    overflow: hidden;
    height: 240px;
    border-radius: 18px;
}

.banner-track {
    display: flex;
    width: 300%;
    height: 100%;
    transition: transform 0.5s ease;
}

.banner-slide {
    width: 100%;
    height: 240px;
    background-size: cover;
    background-position: center;
    position: relative;
}
a:hover {
    color:#a40000ff !important;
}
.banner-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.35);
    color: white;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    opacity: 0;
    transition: .2s;
}

.banner-slider:hover .banner-arrow {
    opacity: 1;
}

.banner-arrow.left { left: 10px; }
.banner-arrow.right { right: 10px; }

.banner {
    flex: 1;
    height: 240px;
    border-radius: 18px;
    overflow: hidden;
    position: relative;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    transition: .25s;
}
.banner:hover {
    transform: translateY(-6px) scale(1.025);
}
.reklam-yatay {
    width: 100%;
    max-width: 1400px;
    margin: 30px auto;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
    border: 1px solid #e5e7eb;
}

.reklam-yatay img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.banner .glass {
    position: absolute;
    bottom: 15px;
    left: 15px;
    right: 15px;
    padding: 18px;
    border-radius: 14px;
    backdrop-filter: blur(1px);
    background: rgba(0,0,0,0.50);
    color: #fff;
}

.banner .glass h3 {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color:white;
}
.banner .glass p {
    margin: 4px 0;
}

.banner-btn {
    display: inline-block;
    margin-top: 8px;
    padding: 8px 14px;
    background: #2563eb;
    border-radius: 8px;
    font-size: 14px;
    color: white;
    text-decoration: none;
    font-weight: 600;
    transition: .2s;
    margin-left:15px;
}
.banner-btn:hover {
    background: #1e40af;
    color:white !important;
}

/* ANA FLEX */
.container-flex {
    display: flex;
    gap: 25px;
}

/* KART GENEL (satılık/kiralık/arsa bloklarında) */
.cards-1 {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(6,1fr);
    gap: 25px;
}

.card-1 {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.10);
    overflow: hidden;
    cursor: pointer;
    transition: .25s;
    border: 1px solid rgba(0,0,0,0.06);
}
.card-1:hover {
    transform: translateY(-4px) scale(1.02);
}

/* Resim alanı */
.card-img-box-1 {
    height: 220px;
    position: relative;
    overflow: hidden;
}
.card-img-box-1 img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

/* Slider dots */
.slider-dots {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 15;
}
.slider-dots span {
    width: 7px;
    height: 7px;
    background: white;
    opacity: .55;
    border-radius: 50%;
}
.slider-dots .active {
    opacity: 1;
    background: #2563eb;
}

/* Slider okları */
.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.35);
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 20;
    opacity: 0;
    transition: .2s;
}
.card-img-box-1:hover .slider-arrow {
    opacity: 1;
}
.slider-arrow.left { left: 10px; }
.slider-arrow.right { right: 10px; }

/* Resim fade animasyon */
.slide-img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
}
.slide-img.active {
    opacity: 1;
}

/* Card body */
.card-body-1 {
    padding: 16px;
}

.price {
    color: #1e40af;
    font-weight: 800;
    font-size: 19px;
}

.card-title-1 {
    font-weight: 600;
    margin-top: 5px;
    color: #0f172a;
    font-size: 16px;
}

.card-loc-1 {
    color: #64748b;
    margin-top: 3px;
    font-size: 14px;
}

/* ODA + İLAN TÜRÜ pill alanı */
.card-meta {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.meta-pill {
    font-size: 12px;
    padding: 4px 9px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #0f172a;
    font-weight: 500;
}

.meta-pill.meta-type {
    background: #e0f2fe;
    color: #1d4ed8;
}

/* Ayraç */
.section-divider{
    position: relative;
    margin: 40px 0;
    height: 1px;
}
.section-divider::before{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: linear-gradient(
        90deg,
        rgba(0,0,0,0) 0%,
        #d1d5db 20%,
        #1e3a8a 50%,
        #d1d5db 80%,
        rgba(0,0,0,0) 100%
    );
}

/* =====================
   POPÜLER İLANLAR SLIDER
===================== */

.pop-slider {
    position: relative;
    overflow: hidden;
    width: 100%;
    margin: 20px 0 50px;
}

.pop-track {
    display: flex;
    transition: transform .5s ease-in-out;
}

.pop-slide {
    min-width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 25px;
}

/* Her popüler ilan kartı, card-1 ile aynı yapıda, sadece flex ayarı */
.pop-card {
    flex: 1;
}

/* Oklar */
.pop-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.9);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transition: .25s;
    user-select: none;
    z-index: 30;
}

.pop-arrow:hover {
    background: #2563eb;
    color: white;
}

.pop-arrow.left { left: 10px; }
.pop-arrow.right { right: 10px; }

/* KREDİ MODÜLÜ, TAPU, BLOG, YORUM, İSTATİSTİK vb.
   (Aşağıda senin eski CSS'lerin aynen duruyor) */

.kredi-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 40px 0;
}

.kredi-box {
    width: 100%;
    max-width: 420px;
    background: #ffffff;
    border-radius: 14px;
    padding: 25px;
    box-shadow: 0px 8px 24px rgba(0,0,0,0.12);
    border: 1px solid #e5e7eb;
    text-align: center;
}

.kredi-title {
    font-size: 22px;
    margin-bottom: 18px;
    color: #111827;
    font-weight: 600;
}

.kredi-input {
    width: 100%;
    height: 46px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 0 12px;
    font-size: 15px;
    margin-bottom: 18px;
    outline: none;
    transition: .2s;
}
.kredi-input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}

.kredi-select-box {
    text-align: left;
    margin-bottom: 20px;
}
.kredi-select-box label {
    font-size: 14px;
    color: #6b7280;
    display: block;
    margin-bottom: 4px;
}

.kredi-select {
    width: 100%;
    height: 46px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 0 12px;
    font-size: 15px;
    outline: none;
    appearance: none;
    background: url("data:image/svg+xml,<svg fill='black' height='16' viewBox='0 0 20 20' width='16' xmlns='http://www.w3.org/2000/svg'><path d='M5.23 7.21a.75.75 0 0 1 1.04-.02L10 10.585l3.73-3.396a.75.75 0 1 1 1.02 1.1l-4.22 3.844a.75.75 0 0 1-1.02 0L5.25 8.29a.75.75 0 0 1-.02-1.08z'/></svg>") 
                no-repeat right 12px center;
    background-color: #fff;
    background-size: 16px;
    transition: .2s;
}
.kredi-select:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}

.kredi-btn {
    width: 100%;
    background: #f97316;
    color: white;
    font-size: 17px;
    font-weight: 600;
    padding: 12px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: .2s ease;
}
.kredi-btn:hover {
    background: #ea580c;
    transform: translateY(-2px);
}

/* KREDİ SLIDER + SAĞ KUTU */
.kredi-area {
    display: flex;
    gap: 25px;
    max-width: 1350px;
    margin: 40px auto;
    padding: 0 20px;
}

.kredi-slider {
    flex: 2;
    height: 350px;
    border-radius: 22px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}

.kredi-slider .slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    padding: 40px;
    color: white;
    opacity: 0;
    transition: opacity .6s ease;
}
.kredi-slider .slide.active {
    opacity: 1;
}

.slide-img {
    position: absolute;
    right: 0;
    bottom: 0;
    height: 100%;
    object-fit: contain;
}

.slide-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: white;
    color: black;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 10;
    font-size: 18px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.25);
}
.slide-arrow.left { left: 15px; }
.slide-arrow.right { right: 15px; }

.kredi-right-box {
    flex: 1;
    background: white;
    padding: 25px;
    border-radius: 18px;
    text-align: center;
    border: 1px solid #e5e7eb;
    box-shadow: 0 6px 20px rgba(0,0,0,0.10);
}
.kredi-right-title {
    font-size: 22px;
    margin-bottom: 20px;
    font-weight: 700;
    color: #1e293b;
}
.kredi-right-btn {
    width: 100%;
    background: #f97316;
    color: white;
    font-size: 17px;
    font-weight: 600;
    padding: 12px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: .2s;
}
.kredi-right-btn:hover {
    background: #ea580c;
}

/* TAPU HESAP ALANI */
.tapu-horizontal-wrapper{
    max-width: 1100px;
    margin: 40px auto;
    display: flex;
    gap: 30px;
    background: #ffffff;
    padding: 30px;
    border-radius: 16px;
    box-shadow: 0 12px 35px rgba(0,0,0,0.12);
    border: 1px solid #e5e7eb;
    font-family: "Roboto", sans-serif;
}
.tapu-left{ flex: 1; }
.tapu-right{
    flex: 1;
    background: #f9fafb;
    border-radius: 14px;
    padding: 20px 24px;
    border: 1px solid #e5e7eb;
}
.tapu-right h4{
    margin: 0 0 10px;
    font-size: 18px;
    font-weight: 700;
    color:#1f2937;
}
.tapu-right ul{
    margin: 0;
    padding-left: 18px;
    font-size: 14px;
    color:#4b5563;
}
.tapu-right li{ margin-bottom: 8px; }
.tapu-title{ font-size:22px; font-weight:700; margin-bottom:5px; color:#111827; }
.tapu-desc{ font-size:13px; color:#6b7280; margin-bottom:15px; }

.tapu-field{ margin-bottom:12px; }
.tapu-field label{
    display:block;
    font-size:13px;
    margin-bottom:4px;
    color:#4b5563;
}
.tapu-field input,
.tapu-field select{
    width:100%;
    padding:10px;
    font-size:14px;
    border-radius:8px;
    border:1px solid #d1d5db;
    transition:.2s;
}
.tapu-field input:focus,
.tapu-field select:focus{
    border-color:#f97316;
    box-shadow:0 0 0 2px rgba(249,115,22,0.2);
}

.tapu-btn{
    width:100%;
    padding:12px;
    background:#f97316;
    border:none;
    color:#fff;
    border-radius:8px;
    font-size:15px;
    font-weight:700;
    cursor:pointer;
    transition:.2s;
}
.tapu-btn:hover{
    background:#ea580c;
    transform:translateY(-2px);
    box-shadow:0 6px 16px rgba(234,88,12,0.35);
}

.tapu-result{
    margin-top:15px;
    background:#fff7ed;
    padding:12px;
    border-radius:10px;
    font-size:14px;
    border:1px solid #fed7aa;
}
.tapu-note{
    font-size:12px;
    margin-top:6px;
    color:#9a3412;
}

/* İSTATİSTİK KUTULARI */
.istatistik-wrapper {
    display: flex;
    justify-content: space-between;
    gap: 25px;
    margin: 50px auto;
    max-width: 1200px;
    padding: 0 20px;
}
.istatistik-box {
    flex: 1;
    background: #ffffff;
    padding: 28px;
    border-radius: 18px;
    text-align: center;
    box-shadow: 0 6px 24px rgba(0,0,0,0.08);
    border: 1px solid #e5e7eb;
    transition: 0.25s ease;
    position: relative;
    overflow: hidden;
}
.istatistik-box:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.12);
}
.istatistik-box::before {
    content: "";
    position: absolute;
    width: 120%;
    height: 120%;
    background: radial-gradient(circle, rgba(37,99,235,0.15) 0%, transparent 70%);
    top: -40%;
    left: -40%;
    opacity: 0;
    transition: 0.4s ease;
}
.istatistik-box:hover::before {
    opacity: 1;
}
.istatistik-box h3 {
    font-size: 34px;
    font-weight: 800;
    color: #1e3a8a;
    margin-bottom: 8px;
}
.istatistik-box p {
    font-size: 15px;
    color: #475569;
    font-weight: 600;
    letter-spacing: 0.3px;
}

/* POPÜLER BÖLGELER */
.bolge-section {
    max-width: 1200px;
    margin: 40px auto 60px;
    padding: 0 20px;
    text-align: center;
}
.bolge-title {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 25px;
    color: #1f2937;
}
.bolge-wrapper {
    display: flex;
    gap: 25px;
}
.bolge-card {
    flex: 1;
    height: 220px;
    background-size: cover;
    background-position: center;
    border-radius: 18px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
    transition: .25s;
}
.bolge-card:hover {
    transform: translateY(-6px) scale(1.03);
}
.bolge-glass {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 16px;
    background: transparent;
    
    color: #fff;
    text-align: left;
}
.bolge-glass h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color:white;
}
.bolge-glass p {
    margin: 2px 0 0;
    font-size: 14px;
    color:white;
}

/* YAŞAM REHBERİ */
.yasam-wrapper {
    max-width: 1200px;
    margin: 40px auto 60px;
    padding: 0 20px;
}
.yasam-title {
    font-size: 34px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 25px;
    text-align: center;
}
.yasam-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 20px;
}
.yasam-card {
    background: #ffffff;
    padding: 20px;
    border-radius: 16px;
    box-shadow: 0 6px 22px rgba(0,0,0,0.08);
    border: 1px solid #e2e8f0;
    transition: .25s;
}
.yasam-card:hover {
    transform: translateY(-6px);
}
.yasam-card h3 {
    font-size: 18px;
    color: #0f172a;
    margin-bottom: 8px;
}
.yasam-card p {
    color: #475569;
    font-size: 14px;
    line-height: 1.6;
}

/* TESTIMONIAL */
.testimonial-section {
    max-width: 1200px;
    margin: 50px auto 70px;
    padding: 0 20px;
    text-align: center;
}
.test-title {
    font-size: 32px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 25px;
}
.test-wrapper {
    display: flex;
    gap: 25px;
    justify-content: center;
}
.test-card {
    flex: 1;
    background: #ffffff;
    padding: 25px;
    border-radius: 16px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
    border: 1px solid #e5e7eb;
    transition: .25s;
}
.test-card:hover {
    transform: translateY(-6px);
}
.stars {
    font-size: 22px;
    color: #f59e0b;
    margin-bottom: 10px;
    letter-spacing: 2px;
}
.test-text {
    font-size: 15px;
    color: #4b5563;
    font-style: italic;
    margin-bottom: 10px;
}
.test-name {
    font-size: 14px;
    font-weight: 600;
    color: #1e3a8a;
}
.kredi-slide-img {
    position: absolute;
    right: 0;
    bottom: 0;
    height: 100%;
    object-fit: contain;
    width: auto;
}

/* BLOG HOME */
.home-blog-section {
    margin: 40px auto 60px;
    max-width: 1400px;
    padding: 0 20px;
}
.home-blog-title {
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 25px;
    color: #1f2937;
}
.home-blog-title span {
    color: #2563eb;
}
.blog-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.blog-view-all {
    padding: 8px 16px;
    background: #fff;
    border: 1px solid #e5e7eb;
    color: #d30000;
    border-radius: 8px;
    font-size: 14px;
    text-decoration: none;
    font-weight: 600;
    transition: .2s;
}
.blog-view-all:hover {
    background: #f3f4f6;
}
.blog-home-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    margin-top: 20px;
}
.blog-home-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0,0,0,.10);
    cursor: pointer;
    transition: .2s;
}
.blog-home-card:hover {
    transform: translateY(-4px);
}
.blog-home-card img {
    width: 100%;
    height: 170px;
    object-fit: cover;
}
.blog-home-card-title {
    padding: 12px;
    font-size: 15px;
    font-weight: 600;
    color: #333;
}

/* MOBİL */
@media(max-width: 900px){
    .container-flex { flex-direction: column; }
    .cards-1 { grid-template-columns: repeat(2,1fr); }
    .istatistik-wrapper { flex-direction: column; gap: 15px; }
    .bolge-wrapper { flex-direction: column; }
    .yasam-grid { grid-template-columns: 1fr; }
    .test-wrapper { flex-direction: column; }
    .kredi-area { flex-direction: column; }
    .tapu-horizontal-wrapper { flex-direction:column; padding:20px; }
}
.kredi-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 20px;
    margin: 30px 0;
}

/* Sol video */
.kredi-video-wrapper {
    flex: 1;
    height: 350px;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
}

.kredi-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Sağ kutu */
.kredi-right-box {
    width: 350px;
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.10);
}
.bolge-slider {
    width: 100%;
    overflow: hidden;
    position: relative;
    margin-top: 20px;
}

.bolge-track {
    display: flex;
    transition: transform .6s ease;
}

.bolge-slider {
    overflow: hidden;
    padding-left: 0;
}

.bolge-track {
    display: flex;
    gap: 20px; /* margin yerine gap kullanılacak */
}

.bolge-item {
    flex: 0 0 calc(33.336% - 20px);
}


.bolge-card {
    height: 230px;
    background-size: cover;
    background-position: center;
    border-radius: 16px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}

.bolge-card:hover {
    transform: scale(1.02);
    transition: .3s;
}

.bolge-glass {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 16px;
   
    color: #fff;
}

/* 🔥 Tablet — 2’li gösterim */
@media (max-width: 1024px) {
    .bolge-item {
        flex: 0 0 calc(50% - 20px);
    }
}

/* 🔥 Mobil — 1'li gösterim */
@media (max-width: 768px) {
    .bolge-item {
        flex: 0 0 calc(100% - 10px);
        margin-right: 10px;
    }
}

/* Mobil uyumu */
@media (max-width: 768px) {
    .kredi-wrapper {
        flex-direction: column;
    }

    .kredi-right-box {
        width: 90%;
    }

    .kredi-video-wrapper {
        height: 200px;
    }
}
/* Tablet için 2 banner yan yana */
@media (max-width: 1024px) {
    .banner-wrapper {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
    }
    .banner-slider {
        width: calc(50% - 10px);   /* 2 yan yana */
        height: 220px;
    }
}

/* Mobil için 1 banner tam genişlik */
@media (max-width: 768px) {
    .banner-wrapper {
        display: block !important; /* Alt alta */
    }
    .banner-slider {
        width: 100% !important;    /* Tam genişlik */
        margin-bottom: 15px;
        height: 200px;
    }
}
/* ===============================
   GLOBAL MOBİL DÜZENLEMELER
   Banner hariç her şeyi düzenler
================================= */

@media(max-width: 768px) {

    /* SAYFA KENAR BOŞLUKLARI */
   

    /* SOL MENÜ DURACAK AMA MOBİLDE TAMA YAKIN GENİŞLİK ALSIN */
    .container-flex {
        flex-direction: column !important;
        gap: 15px !important;
    }

    .left-menu {
        width: 100% !important;
        margin-bottom: 15px;
    }

    /* POPÜLER İLAN KARTLARI – MOBİL 1 SÜTUN YAP */
    .cards-1 {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    /* POPÜLER SLIDER  – KARTLAR ALTA ALINSIN */
    .pop-slide {
        flex-direction: column !important;
        gap: 15px !important;
    }
    .pop-card {
        width: 100% !important;
    }

    /* İstatistik kutuları alt alta */
    .istatistik-wrapper {
        flex-direction: column !important;
        gap: 15px !important;
    }

    /* Yaşam rehberi tek sütun */
    .yasam-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    /* Popüler bölgeler alt alta */
    .bolge-wrapper {
        flex-direction: column !important;
        gap: 15px !important;
    }

    .bolge-card {
        height: 180px !important;
    }

    /* BLOG ALANI */
    .blog-home-list {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    /* YORUM KARTLARI */
    .test-wrapper {
        flex-direction: column !important;
        gap: 15px !important;
    }

    /* TAPU HESAPLAMA */
    .tapu-horizontal-wrapper {
        flex-direction: column !important;
        padding: 20px !important;
    }

    .tapu-left,
    .tapu-right {
        width: 100% !important;
    }

    /* KREDİ ALANI */
    .kredi-area,
    .kredi-wrapper {
        flex-direction: column !important;
        gap: 20px !important;
    }

    .kredi-video-wrapper {
        height: 200px !important;
    }

    .kredi-right-box {
        width: 90% !important;
    }

    /* YATAY REKLAM */
    .reklam-yatay img {
        width: 100% !important;
        height: auto !important;
        border-radius: 10px;
    }

    /* Kart içi fotoğraflar küçülsün */
    .card-img-box-1 {
        height: 180px !important;
    }
    .card-img-box-1 img {
        height: 180px !important;
    }
}
.glass h3 {
    color:white !important;
    margin-left:15px;
}
.glass p {
    color:white !important;
    margin-left:15px;
}

.hero-area {
    height: 350px;           /* ✅ SABİT */
    overflow: hidden;        /* ✅ taşma kontrolü */

    background:
      
        url('uploads/banner-img/satilik-kiralik-daire.jpg') center/cover no-repeat;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;
    margin-top: 30px;
}

.hero-glass {
    background: linear-gradient(
        180deg,
        rgba(255,255,255,0.14),
        rgba(255,255,255,0.08)
    );
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(14px);

    padding: 55px 45px;
    border-radius: 26px;
    max-width: 920px;

    box-shadow:
        0 20px 60px rgba(0,0,0,0.45),
        inset 0 1px 0 rgba(255,255,255,0.25);

    border: 1px solid rgba(255,255,255,0.18);
    color: #f8fafc;
}

.hero-glass {
    max-width: 900px;
    padding: 36px 42px;     /* ✅ küçültüldü */
    border-radius: 24px;
    height: 300px;
}
.hero-glass h1 strong { color: #38bdf8; }

.hero-glass h1 {
    font-size: 36px;   /* ❗ 44 → 36 */
    line-height: 1.2;
    margin-bottom: 10px;
}

.hero-glass p {
    font-size: 16px;
    margin-bottom: 20px;
    color: black;
   
}

.hero-search {
    padding: 14px !important;
    gap: 12px !important;
}
.hero-search select,
.hero-search input,
.hero-search button {
    height: 48px !important;   /* ❗ 52 → 48 */
}

.hero-search {
    display: flex;
    gap: 14px;
    padding: 16px;
    border-radius: 22px;

    background: linear-gradient(
        180deg,
        rgba(255,255,255,0.98),
        rgba(248,250,252,0.96)
    );

    box-shadow:
        0 18px 40px rgba(2,6,23,0.25),
        inset 0 1px 0 rgba(255,255,255,0.6);

    border: 1px solid rgba(226,232,240,0.9);
}


.hero-search select,
.hero-search input {
    height: 52px;
    border-radius: 14px;
    padding: 0 16px;

    border: 1px solid #e2e8f0;
    background: #ffffff;

    font-size: 15px;
    font-weight: 500;
    color: #0f172a;

    transition: .25s ease;
}

.hero-search select::placeholder,
.hero-search input::placeholder {
    color: #94a3b8;
}

.hero-search select:focus,
.hero-search input:focus {
    outline: none;
    border-color: #38bdf8;

    box-shadow:
        0 0 0 4px rgba(56,189,248,0.25),
        0 4px 12px rgba(2,6,23,0.25);
}


.hero-search button {
    height: 52px;
    padding: 0 34px;

    border-radius: 16px;
    border: none;

    background: linear-gradient(
        135deg,
        #2563eb,
        #38bdf8
    );

    color: #ffffff;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .3px;

    cursor: pointer;
    transition: .25s ease;

    box-shadow:
        0 10px 25px rgba(37,99,235,0.45);
}

.hero-search button:hover {
    transform: translateY(-2px);
    box-shadow:
        0 16px 35px rgba(37,99,235,0.6);
}

.chip-slider-wrapper {
    margin-top: 22px;
    overflow: hidden;
    width: 100%;
}

.chip-slider-track {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 8px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* scrollbar gizle */
.chip-slider-track::-webkit-scrollbar {
    display: none;
}
.chip-slider-track {
    scrollbar-width: none;
}

/* CHIP */
.chip-item {
    white-space: nowrap;
    padding: 10px 18px;
    border-radius: 999px;

    background: linear-gradient(
        135deg,
        rgba(56,189,248,0.25),
        rgba(37,99,235,0.25)
    );

    color: #e0f2fe;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;

    transition: .25s ease;
}

.chip-item:hover {
    background: linear-gradient(
        135deg,
        #38bdf8,
        #2563eb
    );
    color: #fff;
    transform: translateY(-2px);
}

/* Özel vurgu */
.chip-item.highlight {
    background: linear-gradient(
        135deg,
        #f97316,
        #fb923c
    );
    color: #fff;
}


@media(max-width:768px){

    .hero-area {
        height: auto;
        padding: 40px 16px;
    }

    .hero-glass {
        padding: 36px 22px;
    }

    .hero-glass h1 {
        font-size: 30px;
    }

    .hero-search {
        flex-direction: column;
    }

}
@media (max-width: 768px) {
    .hero-search {
        flex-direction: column;
        border-radius: 20px;
    }

    .hero-search button {
        width: 100%;
        height: 54px;
        font-size: 16px;
    }
}
/* ✅ Select içindeki mavi seçimi kaldır */
.hero-search select option {
    background: #ffffff !important;
    color: #0f172a;
}

/* Hover ve selected durumunu nötr yap */
.hero-search select option:hover,
.hero-search select option:checked {
    background: #f1f5f9 !important;  /* açık gri */
    color: #0f172a !important;
}
/* ✅ ANASAYFA – SOL KATEGORİ KALKSIN */
.left-menu {
    display: none !important;
}

/* ✅ ANA İÇERİK TAM GENİŞLİK */
.container-flex {
    display: block !important;
}
.card-loc-1{
    font-size:13px;
    margin-top:4px;
    color:#475569;
    font-weight:500;
}

.card-title-1{
    margin-top:10px;
    font-size:15px;
    font-weight:600;
    color:#0f172a;
    line-height:1.35;
}
@media(max-width:768px){

    /* Yeni eklenenler slider alanı */
    .pop-slider {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    .pop-track {
        display: flex;
        gap: 16px;
    }

    .pop-slide {
        min-width: 85%;
        scroll-snap-align: start;
        flex-shrink: 0;
    }

    /* Okları gizle */
    .pop-arrow {
        display:none !important;
    }

}
.category-section {
    margin: 50px 0 70px;
}

.category-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 15px;
}

.category-header h2 {
    font-size: 38px;
    font-weight: 800;
    color: #0f172a;
}

.category-header p {
    font-size: 14px;
    color: #64748b;
    margin-top: 4px;
}

.category-viewall {
    font-size: 15px;
    font-weight: 600;
    color: #2563eb;
    text-decoration: none;
}
.category-viewall:hover {
    text-decoration: underline;
}

/* Kart grid daha ferah */
.category-section .cards-1 {
    grid-template-columns: repeat(4,1fr);
}

@media(max-width:900px){
    .category-section .cards-1 {
        grid-template-columns: repeat(2,1fr);
    }
}
@media(max-width:600px){
    .category-section .cards-1 {
        grid-template-columns: 1fr;
    }
}
  .endeksa-wrapper{
    max-width:1200px;
    margin:50px auto;
    padding:35px;
    background:#ffffff;
    border-radius:18px;
    box-shadow:0 10px 30px rgba(0,0,0,0.12);
}

.endeksa-wrapper h2{
    font-size:30px;
    font-weight:800;
    color:#1e293b;
    text-align:center;
}

.endeksa-desc{
    text-align:center;
    color:#4b5563;
    margin:12px 0 25px;
    font-size:15px;
}

.endeksa-form{
    display:flex;
    gap:15px;
    justify-content:center;
    flex-wrap:wrap;
}

.endeksa-form select,
.endeksa-form button{
    height:48px;
    padding:0 14px;
    font-size:15px;
    border-radius:10px;
    border:1px solid #d1d5db;
}

.endeksa-form button{
    background:#2563eb;
    color:#fff;
    font-weight:700;
    cursor:pointer;
}

.endeksa-form button:hover{
    background:#1e40af;
}

.endeksa-result{
    margin-top:35px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}

.end-box{
    background:#f8fafc;
    padding:20px;
    border-radius:12px;
    text-align:center;
    border:1px solid #e5e7eb;
}

.end-box span{
    font-size:14px;
    color:#64748b;
}

.end-box strong{
    display:block;
    font-size:22px;
    margin-top:6px;
    color:#111827;
}

.end-box.trend strong{
    color:#16a34a;
}

.end-note{
    grid-column:1/-1;
    font-size:12px;
    color:#92400e;
    background:#fffbeb;
    border:1px solid #fde68a;
    padding:12px;
    border-radius:10px;
    text-align:center;
}
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 30px 0 15px;
}

.section-header h2 {
    font-size: 45px;
    font-weight: 800;
    margin: 0;
}

.view-all-btn {
    padding: 10px 18px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    color: #1e40af;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    transition: .25s ease;
}

.view-all-btn:hover {
    background: #ffffff;
    color: #fff;
    transform: translateX(4px);
}
/* ===============================
   ✅ GERÇEK MOBİL RESET (SON SÖZ)
================================ */
@media (max-width:768px){

    /* SOL MENÜ = YOK */
    .left-menu{ display:none !important; }

    /* ANA KONTEYNER */
    .container-flex{
        display:block !important;
    }

    /* KART GRID = TEK SÜTUN */
    .cards-1{
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    /* POPÜLER SLIDER = YATAY KAYDIR */
    .pop-slider{
        overflow-x:auto !important;
        scroll-snap-type:x mandatory;
        -webkit-overflow-scrolling:touch;
    }

    .pop-track{
        display:flex !important;
        gap:14px !important;
        transform:none !important; /* ❗ translateX iptal */
    }

    .pop-slide{
        min-width:90% !important;
        scroll-snap-align:start;
        flex-shrink:0;
    }

    /* POP OKLAR KAPALI */
    .pop-arrow{ display:none !important; }

    /* KART RESİM */
    .card-img-box-1,
    .card-img-box-1 img,
    .slide-img{
        height:180px !important;
    }

    /* SLIDER OK + DOT MOBİLDE YOK */
    .slider-arrow,
    .slider-dots{
        display:none !important;
    }

    /* KATEGORİ BADGE YUMUŞAT */
    .category-badge{
        font-size:11px;
        padding:4px 8px;
        border-radius:8px;
        top:8px;
        left:8px;
    }

    /* FİYAT / BAŞLIK */
    .price{ font-size:18px; }
    .card-title-1{ font-size:15px; }
    .card-loc-1{ font-size:13px; }

}
@media (max-width: 768px) {

    .pop-track {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    .pop-slide {
        display: flex !important;
        flex: 0 0 100%;
        scroll-snap-align: start;
        justify-content: center;
    }

    .pop-card {
        width: 90%;
        max-width: 360px;
    }

    /* Scrollbar gizle */
    .pop-track::-webkit-scrollbar {
        display: none;
    }
}
@media (max-width: 768px) {
    .pop-arrow {
        display: none;
    }
}
@media (max-width: 768px) {
    .pop-track {
        scroll-behavior: smooth;
        padding-left: 10px;
    }
}
/* ===============================
   BANNER BOX – KESİN TEMİZ HAL
================================ */

.banner-wrapper.banner-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin: 40px 0;
}

.banner-box {
    height: 250px;
    border-radius: 18px;
    position: relative;
    overflow: hidden;
    cursor: pointer;

    background-color: #111; /* resim yoksa siyah */
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;

    box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

/* overlay */
.banner-box::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,.25),
        rgba(0,0,0,.65)
    );
    z-index: 1;
}

/* yazı alanı */
.banner-box .glass {
    position: absolute;
    bottom: 18px;
    left: 18px;
    right: 18px;
    z-index: 2;

    background: rgba(91, 89, 89, 0.45);
    backdrop-filter: blur(1px);

    padding: 16px;
    border-radius: 14px;
}

.banner-box h3 {
    margin: 0;
    font-size: 20px;
    color: #fff;
    font-weight: 800;
}
/* ================================
   TEK KUTU – MODERN İSTATİSTİK
================================ */

.stats-box-wrapper {
    max-width: 1200px;
    margin: 70px auto;
    padding: 45px 40px;

    background: linear-gradient(
        180deg,
        #ffffff,
        #f8fafc
    );

    border-radius: 22px;
    border: 1px solid #e5e7eb;

    box-shadow:
        0 20px 60px rgba(2,6,23,0.12);

    position: relative;
    overflow: hidden;
}

/* üst başlık */
.stats-box-header {
    text-align: center;
    margin-bottom: 35px;
}

.stats-box-header h2 {
    font-size: 40px;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 6px;
}

.stats-box-header p {
    font-size: 15px;
    color: #64748b;
}

/* grid */
.stats-box-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

/* tek veri */
.stat-item {
    background: #ffffff;
    border-radius: 16px;
    padding: 28px 20px;
    text-align: center;

    border: 1px solid #e5e7eb;
    transition: .35s ease;
}

.stat-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(2,6,23,0.15);
}

/* vurgu */
.stat-item.highlight {
    background: linear-gradient(
        135deg,
        #2563eb,
        #38bdf8
    );
    border: none;
}

.stat-item.highlight .stat-value,
.stat-item.highlight .stat-text {
    color: #ffffff;
}

/* sayı */
.stat-value {
    display: block;
    font-size: 38px;
    font-weight: 900;
    color: #0f172a;
    letter-spacing: -1px;
    margin-bottom: 6px;
}

/* alt yazı */
.stat-text {
    font-size: 14px;
    font-weight: 600;
    color: #475569;
    letter-spacing: 0.4px;
}

/* MOBİL */
@media(max-width: 900px) {
    .stats-box-grid {
        grid-template-columns: repeat(2,1fr);
    }
}

@media(max-width: 520px) {
    .stats-box-wrapper {
        padding: 30px 22px;
    }

    .stats-box-grid {
        grid-template-columns: 1fr;
    }

    .stat-value {
        font-size: 34px;
    }
}

.banner-box p {
    margin-top: 6px;
    font-size: 14px;
    color: #e5e7eb;
}
@media (max-width: 1024px) {
    .banner-wrapper.banner-4 {
        grid-template-columns: repeat(2,1fr);
    }
}

@media (max-width: 768px) {
    .banner-wrapper.banner-4 {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .banner-box {
        height: 220px;
        margin-top: 20px;
    }
}
/* =============================
   YAŞAM REHBERİ – MODERN KUTU
============================= */

.life-guide-box {
    max-width: 1200px;
    margin: 60px auto;
    padding: 40px;

    background: #ffffff;
    border-radius: 24px;
    border: 1px solid #e5e7eb;

    box-shadow: 0 18px 50px rgba(2,6,23,0.12);
}

.life-header {
    text-align: center;
    margin-bottom: 30px;
}

.life-header h2 {
    font-size: 38px;
    font-weight: 800;
    color: #0f172a;
}

.life-header p {
    font-size: 15px;
    color: #64748b;
    margin-top: 6px;
}

.life-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 22px;
}

.life-item {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    padding: 26px 22px;
    transition: .3s ease;
}

.life-item:hover {
    background: #ffffff;
    transform: translateY(-6px);
    box-shadow: 0 15px 35px rgba(2,6,23,0.15);
}

.life-item h4 {
    font-size: 17px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 8px;
}

.life-item p {
    font-size: 14px;
    line-height: 1.6;
    color: #475569;
}

/* MOBİL */
@media(max-width: 900px) {
    .life-grid {
        grid-template-columns: repeat(2,1fr);
    }
}
@media(max-width: 520px) {
    .life-grid {
        grid-template-columns: 1fr;
    }
}
/* =============================
   POPÜLER ARAMALAR
============================= */

.popular-search-box {
    max-width: 1200px;
    margin: 60px auto;
    padding: 30px 35px;

    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 18px;

    box-shadow: 0 12px 35px rgba(2,6,23,0.12);
}

.popular-search-box h3 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 18px;
    color: #0f172a;
}

.popular-search-list {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.popular-search-list a {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 12px 20px;
    border-radius: 999px;

    background: #ffffff;
    border: 1px solid #d1d5db;

    font-size: 15px;
    color: #111827;
    font-weight: 600;
    text-decoration: none;

    transition: .25s ease;
}

.popular-search-list a:hover {
    background: #f8fafc;
    border-color: #2563eb;
    color: #2563eb;
}

/* MOBİL */
@media(max-width:768px){
    .popular-search-list a{
        width:100%;
        justify-content:space-between;
    }
}
/* =====================================
   HERO – MOBİL NET DÜZELTME
===================================== */
@media (max-width: 768px) {

    /* Hero ana alan */
    .hero-area {
        height: auto !important;
        min-height: unset !important;
        padding: 24px 16px !important;

        display: block !important;
        background-position: center top !important;
        background-size: cover !important;
    }

    /* İç cam alan */
    .hero-glass {
        height: auto !important;
        padding: 24px 18px !important;
        border-radius: 18px !important;
        margin: 0 !important;
    }

    /* Başlık */
    .hero-glass h1 {
        font-size: 26px !important;
        line-height: 1.25 !important;
        margin-bottom: 8px;
        text-align: left;
    }

    /* Alt açıklama */
    .hero-glass p {
        font-size: 14px !important;
        margin-bottom: 14px;
        text-align: left;
    }

    /* Arama formu */
    .hero-search {
        flex-direction: column !important;
        gap: 10px !important;
        padding: 14px !important;
        border-radius: 16px !important;
    }

    .hero-search select,
    .hero-search input,
    .hero-search button {
        width: 100% !important;
        height: 46px !important;
        font-size: 14px !important;
    }

    /* Chipler */
    .chip-slider-wrapper {
        margin-top: 14px !important;
    }

    .chip-item {
        font-size: 12px !important;
        padding: 8px 14px !important;
    }

}
@media (max-width: 768px) {

    /* HERO içindeki kesilmeyi engelle */
    .hero-glass {
        height: auto !important;
        overflow: visible !important;
    }

    /* CHIP ALANI */
    .chip-slider-wrapper {
        width: 100%;
        overflow: visible !important;
        margin-top: 14px !important;
    }

    .chip-slider-track {
        display: flex !important;
        gap: 10px;
        overflow-x: auto !important;
        padding-bottom: 10px;
        -webkit-overflow-scrolling: touch;
    }

    /* Tek tek chipler */
    .chip-item {
        flex-shrink: 0;
        white-space: nowrap;
        font-size: 12px;
        padding: 8px 14px;
    }
}
/* ===============================
   CHIP SLIDER – YATAY KAYAR
================================ */

.chip-slider-wrapper {
    width: 100%;
    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 10px; /* taşmayı önler */
}

.chip-slider-track {
    display: flex;
    gap: 10px;
    width: max-content;   /* 🔴 KRİTİK */
}

/* CHIP */
.chip-item {
    flex-shrink: 0;       /* 🔴 KRİTİK */
    white-space: nowrap;

    padding: 10px 18px;
    border-radius: 999px;

    background: #3fa9f5;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

/* Hover (PC) */
.chip-item:hover {
    background: #0091ff;
}

/* Scrollbar – İstersen görünsün */
.chip-slider-wrapper::-webkit-scrollbar {
    height: 4px;
}
.chip-slider-wrapper::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 10px;
}

/* İstersen scrollbar tamamen gizli */
.chip-slider-wrapper {
    scrollbar-width: none;
}
.chip-slider-wrapper::-webkit-scrollbar {
    display: none;
}
/* ===============================
   4'LÜ BANNER – HOVER EFEKTİ
================================ */

.banner-box {
    transition: 
        transform .35s ease,
        box-shadow .35s ease;
}

/* Hover'da kart yükselsin */
.banner-box:hover {
    transform: translateY(-10px) scale(1.03);
    box-shadow: 0 18px 45px rgba(2,6,23,.45);
}

/* Overlay daha karanlık olsun */
.banner-box::before {
    transition: background .35s ease;
}

.banner-box:hover::before {
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,.35),
        rgba(0,0,0,.85)
    );
}

/* Yazı alanı (glass) canlansın */
.banner-box .glass {
    transition: 
        transform .35s ease,
        background .35s ease;
}

.banner-box:hover .glass {
    transform: translateY(-6px);
  
}

/* Başlık hover’da hafif parlasın */
.banner-box:hover h3 {
    text-shadow: 
        0 0 6px rgba(255,255,255,.35),
        0 4px 20px rgba(0,0,0,.6);
}