.grid-container-1 {
display: grid;
grid-template-columns: 100%;
}
.grid-container-2 {
display: grid;
grid-template-columns: 50% 50%;
}
.grid-container-3 {
display: grid;
grid-template-columns: 33.333% 33.333% 33.333%;
}
.grid-container-4 {
display: grid;
grid-template-columns: 25% 25% 25% 25%;
}
.grid-container-5 {
display: grid;
grid-template-columns: 20% 20% 20% 20% 20%;
}

.vitrin-div{background:#fff;}

.grid-item img.aniborder1 { border: 2px solid #ddd; border-image: url(../img/border1.svg) 1; }
.grid-item img.aniborder2 { border: 2px solid #ddd; border-image: url(../img/border2.svg) 1; }
.grid-item img.aniborder3 { border: 2px solid #ddd; border-image: url(../img/border1.svg) 1; }

.grid-item {
padding: 1px;
font-size: 10px;
text-align: center;
margin: 2px;
border:2px solid #ddd;
}

.grid-item img {
width: 100%;
}

.name-item{
border-radius: 3px 3px 0 0;
background-image: linear-gradient( 171.8deg,  rgba(5,111,146,1) 13.5%, rgba(6,57,84,1) 78.6% );
/*background-image: linear-gradient( 180deg, rgb(137 75 153) -27.5%, rgb(98 156 205) 94.7% );color: white;border-radius: 0 0 3px 3px;*/
color: white;
padding: 5px;
width: 100%;
text-align: center;
font-weight: bold;
font-size: 10px;
}

.place-item{
background-image: radial-gradient( circle farthest-corner at 10% 20%,  rgba(132,81,161,1) 0%, rgba(132,81,161,0.83) 90% );
/*background-image: linear-gradient( 0deg, rgb(137 75 153) -27.5%, rgb(98 156 205) 94.7% );*/
color: white;
border-radius: 0 0 3px 3px;
padding: 5px;
width: 100%;
/* font-weight: bold; */
font-size: 10px;
text-align: center;
}

.resimKapsayici {position:relative}
.resimYazisi {
color: #fff;
font-size:20px;
font-family:Calibri;
font-weight: bold;
line-height: 1;
left: 50%;
position: absolute;
text-align: center;
text-transform: uppercase;
top: 50%;
transform: translate(-50%, -50%);
text-shadow:0px 1px 3px #000;
}
.color-text{color: #000;text-shadow:0px 1px 3px #FF4C4C;}


/* Model Overlay Stilleri - aniborder uyumlu */

.model-card {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    transition: transform 0.3s ease;
    display: block;
}

.model-card:hover {
    transform: scale(1.02);
}

.model-overlay {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(to top, rgba(138, 43, 226, 0.9) 0%, rgba(138, 43, 226, 0.8) 50%, transparent 100%);
    color: white;
    padding: 20px 15px 15px;
    transform: translateY(100%);
    transition: transform 0.4s ease;
    z-index: 2;
}

.model-card:hover .model-overlay {
    transform: translateY(0);
}

.model-info {
    text-align: left;
}

.model-name {
    font-size: 24px;
    font-weight: bold;
    margin: 0 0 12px 0;
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
    letter-spacing: 1px;
}

.model-detail {
    font-size: 14px;
    margin: 8px 0;
    color: #fff;
    font-weight: 500;
    display: flex;
    align-items: center;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}

.model-detail i {
    margin-right: 8px;
    width: 16px;
    text-align: center;
    color: #fff;
}

.model-detail i.fa-whatsapp {
    margin-left: 8px;
    margin-right: 0;
    color: #25D366;
}

/* Grid Item ve Resim Düzenlemeleri */
.grid-item {
    margin-bottom: 15px;
    position: relative;
}

.grid-item img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
    transition: transform 0.3s ease;
}

.model-card:hover img {
    transform: scale(1.05);
}

/* aniborder sınıflarıyla uyumluluk */
.model-card img.aniborder1,
.model-card img.aniborder2 {
    border-radius: 10px;
}

/* Gölge Efektleri */
.model-card {
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.model-card:hover {
    box-shadow: 0 12px 30px rgba(0,0,0,0.25);
}

/* Responsive Düzenlemeler */
@media (max-width: 768px) {
    .model-overlay {
        transform: translateY(0);
        background: linear-gradient(to top, rgba(138, 43, 226, 0.85) 0%, rgba(138, 43, 226, 0.7) 70%, transparent 100%);
        padding: 15px 12px 12px;
    }
    
    .model-name {
        font-size: 20px;
        margin-bottom: 10px;
    }
    
    .model-detail {
        font-size: 13px;
        margin: 6px 0;
    }
}

@media (max-width: 480px) {
    .model-name {
        font-size: 18px;
        margin-bottom: 8px;
    }
    
    .model-detail {
        font-size: 12px;
        margin: 5px 0;
    }
    
    .model-overlay {
        padding: 12px 10px 10px;
    }
}

/* Link Stilleri */
.model-card a {
    text-decoration: none;
    color: inherit;
    display: block;
}

.model-card a:hover {
    text-decoration: none;
    color: inherit;
}

/* Animasyon Efektleri */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.model-card:hover .model-info > * {
    animation: fadeInUp 0.3s ease forwards;
}

.model-card:hover .model-info > *:nth-child(2) {
    animation-delay: 0.1s;
}

.model-card:hover .model-info > *:nth-child(3) {
    animation-delay: 0.2s;
}

.model-card:hover .model-info > *:nth-child(4) {
    animation-delay: 0.3s;
}

.model-card:hover .model-info > *:nth-child(5) {
    animation-delay: 0.4s;
}



/* Model Card Styles - Resim üzerine bilgi gösterimi için */
.model-card {
    position: relative;
    display: inline-block;
    width: 100%;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.model-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

.model-card img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

.model-card:hover img {
    transform: scale(1.05);
}

.model-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.8));
    color: white;
    padding: 20px 15px 15px;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.model-card:hover .model-info {
    transform: translateY(0);
}

.model-name {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 5px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}

.model-age {
    font-size: 14px;
    margin-bottom: 3px;
    opacity: 0.9;
}

.model-location {
    font-size: 14px;
    margin-bottom: 3px;
    opacity: 0.9;
}

.model-meeting {
    font-size: 13px;
    margin-bottom: 3px;
    opacity: 0.8;
}

.model-phone {
    font-size: 14px;
    font-weight: bold;
    color: #ffd700;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .model-info {
        transform: translateY(0);
        background: rgba(0,0,0,0.7);
        position: static;
        padding: 10px;
    }
    
    .model-name {
        font-size: 16px;
    }
    
    .model-age, .model-location {
        font-size: 13px;
    }
    
    .model-meeting {
        font-size: 12px;
    }
    
    .model-phone {
        font-size: 13px;
    }
}

/* Grid container adjustments */
.grid-container-1 .model-card,
.grid-container-2 .model-card,
.grid-container-3 .model-card,
.grid-container-4 .model-card,
.grid-container-5 .model-card {
    height: auto;
    min-height: 200px;
}

/* Alternative style - Always visible info */
.model-card.always-visible .model-info {
    transform: translateY(0);
    background: rgba(0,0,0,0.7);
    position: absolute;
    bottom: 0;
}

.model-card.always-visible:hover .model-info {
    background: rgba(0,0,0,0.9);
}

/* Compact style for smaller cards */
.model-card.compact .model-info {
    padding: 10px;
}

.model-card.compact .model-name {
    font-size: 14px;
    margin-bottom: 2px;
}

.model-card.compact .model-age,
.model-card.compact .model-location,
.model-card.compact .model-meeting {
    font-size: 11px;
    margin-bottom: 1px;
}

.model-card.compact .model-phone {
    font-size: 12px;
}