/* ===========================================================
   Harman İlan Kartı v2 — PAYLAŞILAN (anasayfa / hal / haber vb.)
   Kullanım: <div class="ilanv2-grid"> @foreach <x-web.ilan-karti :ilan="$ilan"/> @endforeach </div>
   Kaynak: web/ilan/index-v2.blade.php (atomik geçiş tasarımı). 2026-06-22.
   =========================================================== */
.ilanv2-grid{ display:grid; grid-template-columns:1fr; gap:8px; }
@media (min-width:768px){ .ilanv2-grid{ grid-template-columns:1fr 1fr; gap:12px; } }
@media (min-width:1300px){ .ilanv2-grid{ grid-template-columns:1fr 1fr 1fr; } }
.ilanv2-grid > .ilanv2-cell{ position:relative; }

/* Kart */
.ilanv2-grid .ilv2card{ position:relative; display:flex; gap:10px; align-items:stretch; min-height:104px;
    border:1px solid #e8eaed; border-radius:14px; padding:7px 9px; background:#fff; text-decoration:none;
    transition:box-shadow .18s, transform .12s; }
.ilanv2-grid .ilv2card:hover{ box-shadow:0 6px 20px rgba(16,24,40,.09); transform:translateY(-1px); }
/* Foto KARE 1:1 üst-hizalı */
.ilanv2-grid .ilv2im{ position:relative; z-index:2; display:block; width:104px; height:104px; flex:0 0 104px; align-self:flex-start;
    aspect-ratio:1/1; border-radius:11px; overflow:hidden; background:#f1f3ef; }
.ilanv2-grid .ilv2im img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Çoklu foto slider */
.ilanv2-grid .ilv2im .splide, .ilanv2-grid .ilv2im .splide__track, .ilanv2-grid .ilv2im .splide__list, .ilanv2-grid .ilv2im .splide__slide{ height:100%; }
.ilanv2-grid .ilv2im .splide__slide a{ display:block; width:100%; height:100%; }
.ilanv2-grid .ilv2im .splide__slide img{ width:100%; height:100%; object-fit:cover; display:block; }
.ilanv2-grid .ilv2im .splide__pagination{ bottom:5px; padding:0; margin:0; }
.ilanv2-grid .ilv2im .splide__pagination li{ line-height:0; margin:0; }
.ilanv2-grid .ilv2im .splide__pagination__page{ width:3px; height:3px; margin:0 0.3px; padding:0; background:rgba(255,255,255,.72); opacity:1; border:0; box-shadow:0 0 1px rgba(0,0,0,.4); }
.ilanv2-grid .ilv2im .splide__pagination__page.is-active{ background:#fff; transform:scale(1.25); }
/* Rozet */
.ilanv2-grid .ilv2bdg{ position:absolute; left:6px; top:6px; z-index:2; font-size:8px; font-weight:800;
    padding:3px 9px; border-radius:7px; background:rgba(255,255,255,.94); line-height:1.4; }
.ilanv2-grid .ilv2bdg-s{ color:#1a4a30; } .ilanv2-grid .ilv2bdg-a{ color:#2f6dd0; }
.ilanv2-grid .ilv2bdg-iv{ color:#b7791f; } .ilanv2-grid .ilv2bdg-ic{ color:#c2410c; }
/* Favori (kompakt KAL — tema/touch ezmesini engelle) */
.ilanv2-grid .ilv2card .ilv2fav{ position:absolute; right:6px; top:6px; z-index:4; width:28px; height:28px;
    border-radius:50%; background:rgba(255,255,255,.92); border:1px solid #eee; display:flex; align-items:center;
    justify-content:center; color:#c2c8cf; cursor:pointer; padding:0; }
.ilanv2-grid .ilv2card .ilv2fav.is-active{ color:#e0245e; } .ilanv2-grid .ilv2card .ilv2fav i{ font-size:12px !important; }
.ilanv2-grid .ilv2card .ilv2im .ilv2fav.favori-toggle-btn{ width:30px !important; height:30px !important;
    min-width:0 !important; min-height:0 !important; max-width:30px !important; max-height:30px !important;
    padding:0 !important; flex:0 0 auto !important; box-sizing:border-box !important; border-radius:50% !important; line-height:1 !important; }
/* Bilgi */
.ilanv2-grid .ilv2info{ flex:1 1 auto; min-width:0; max-width:100%; display:flex; flex-direction:column;
    justify-content:center; align-items:stretch; text-align:left; }
.ilanv2-grid .ilv2ttl{ font-size:12px; font-weight:700; line-height:1.3; color:#1f2937; text-decoration:none;
    white-space:normal !important; display:-webkit-box !important; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden; word-break:break-word; }
.ilanv2-grid .ilv2ttl::after{ content:""; position:absolute; inset:0; z-index:1; }
.ilanv2-grid .ilv2prc{ font-size:14px; font-weight:800; color:#1a7a3a; margin:3px 0 2px; white-space:nowrap; }
.ilanv2-grid .ilv2prc .ilv2unit{ font-size:9px; color:#9ca3af; font-weight:600; }
.ilanv2-grid .ilv2prc .ilv2pz{ color:#1a7a3a; font-size:12px; }
.ilanv2-grid .ilv2loc, .ilanv2-grid .ilv2qty, .ilanv2-grid .ilv2nak{ font-size:9px; color:#6b7280; line-height:1.4;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
.ilanv2-grid .ilv2nak .ilv2nakvar{ color:#326c3a; font-weight:700; }
.ilanv2-grid .ilv2qty .ilv2tuk{ color:#dc3545; font-weight:700; }
.ilanv2-grid .ilv2metarow{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:5px; }
.ilanv2-grid .ilv2meta{ display:flex; flex-direction:column; min-width:0; gap:2px; }
/* CTA */
.ilanv2-grid .ilv2tek{ position:relative; z-index:2; flex-shrink:0; display:inline-block; background:#2f7d4f;
    color:#fff; font-weight:700; font-size:11px; padding:6px 14px; border-radius:9px; text-decoration:none; white-space:nowrap; }
.ilanv2-grid .ilv2tek:hover{ background:#286b44; color:#fff; }
.ilanv2-grid .ilv2tek-ilanim{ background:#f59e0b; } .ilanv2-grid .ilv2tek-bilgi{ background:#0a58ca; }
@media (max-width:380px){ .ilanv2-grid .ilv2im{ width:92px; height:92px; flex-basis:92px; } .ilanv2-grid .ilv2ttl{ font-size:11px; } .ilanv2-grid .ilv2tek{ padding:7px 12px; font-size:10px; } }