/* =====================================================================
   Cart (ana sayfa kart blokları) modülü.

   Kartlar ynt > cart modülünden yönetilir; renk, zemin, sütun genişliği
   ve minimum yükseklik veritabanından gelip inline style olarak basılır
   (bkz. app/Helpers/cart_helper.php). Bu dosyada yalnızca o değerleri
   tüketen tasarım kuralları var — hiçbir renk burada sabitlenmez,
   --aralink-color / --aralink-bg değişkenleri karttan gelir.

   Kaynak: vanosb_yeni/assets/css/tasarim.css içindeki .aralink-* blokları.
   ===================================================================== */

/* Kart — pastel zemin, üstte renkli çizgi, altta gri çizgi, sağda ince ayırıcı */
.aralink-kart {
    cursor: pointer;
    background-color: var(--aralink-bg, #f5f6f8);
    border-top: 4px solid var(--aralink-color, #ccc);
    border-bottom: 3px solid rgba(0, 0, 0, .06);
    border-right: 1px solid rgba(0, 0, 0, .06);
    transition: background-color .38s ease, border-bottom-color .38s ease;
}

.aralink-kart:hover {
    background-color: var(--aralink-color, #888);
    border-bottom-color: var(--aralink-color, #888);
}

/* SVG arka plan — başlangıçta gri tonlarda ve soluk */
.aralink-svg-bg {
    position: absolute;
    right: -8%;
    top: 50%;
    transform: translateY(-50%) scale(.82);
    width: 52%;
    height: 150%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: .18;
    filter: grayscale(100%);
    transition: transform .38s ease, opacity .38s ease, width .38s ease,
                right .38s ease, filter .38s ease;
    pointer-events: none;
    z-index: 1;
}

/* Hover: SVG renklenir, belirginleşir ve yayılır */
.aralink-kart:hover .aralink-svg-bg {
    transform: translateY(-50%) scale(1.12);
    opacity: .42;
    filter: grayscale(0%);
    width: 72%;
    right: -14%;
}

/* İçerik SVG'nin üstünde */
.aralink-icerik { position: relative; z-index: 2; }

/* İkon — kartın rengiyle, hover beyaz */
.aralink-icon {
    color: var(--aralink-color, #999);
    transition: color .38s ease;
}
.aralink-kart:hover .aralink-icon { color: rgba(255, 255, 255, .9); }

/* Başlık — varsayılan koyu gri, hover beyaz */
.aralink-baslik { color: #374151; transition: color .38s ease; }
.aralink-kart:hover .aralink-baslik { color: #fff; }

/* Alt açıklama */
.aralink-alt {
    font-size: .78rem;
    color: #9ca3af;
    line-height: 1.4;
    transition: color .38s ease;
}
.aralink-kart:hover .aralink-alt { color: rgba(255, 255, 255, .70); }

/* Buton — varsayılan outlined gri */
.aralink-btn {
    background-color: transparent;
    color: #6b7280;
    border: 1.5px solid #d1d5db;
    transition: background-color .25s ease, color .25s ease,
                border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

/* Hover: kartın kendi rengiyle dolu buton.
   vanosb'da bu sabit sarıydı (#F5C518); burada karttan gelen renk
   kullanılıyor ki her kart kendi paletiyle tutarlı kalsın. */
.aralink-kart:hover .aralink-btn {
    background-color: #fff;
    color: var(--aralink-color, #1a1a2e);
    border-color: #fff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .20);
    transform: scale(1.07);
}

/* --------------------------------------------------- içerik tipi kart */

/* `icerik` kartının kutusu inline style ile geliyor; buradaki kurallar
   yalnızca iç tipografiyi ORTKA sayfa metniyle aynı hizaya çeker. */
.cart-icerik-kutu p { line-height: 1.75; }
.cart-icerik-kutu img { max-width: 100%; height: auto; }
.cart-icerik-kutu > *:last-child { margin-bottom: 0 !important; }

/* ---------------------------------------------------------------------
   İÇERİK KARTI — sarmalı görsel

   Öğeler sırayla basılır; görsel varsayılan olarak metnin üstünde tam
   genişlikte çıkar (.cart-gorsel-blok). "Sola/sağa yasla" seçilince
   görsel float edilir ve KENDİNDEN SONRAKİ metin çevresine sarılır.
   --------------------------------------------------------------------- */

/* Float eden görsel kutudan taşmasın */
.cart-icerik-kutu::after {
  content: "";
  display: table;
  clear: both;
}

.cart-gorsel-blok { }

.cart-gorsel-sol,
.cart-gorsel-sag {
  max-width: 100%;
}

.cart-gorsel-sol {
  float: left;
  margin: 0 20px 14px 0;
}

.cart-gorsel-sag {
  float: right;
  margin: 0 0 14px 20px;
}

/* CKEditor'den gelen metinde ilk/son paragrafın fazla boşluğu olmasın */
.cart-metin > *:first-child { margin-top: 0; }
.cart-metin > *:last-child  { margin-bottom: 0; }

/* Dar ekranda sarma okunaksız olur: görsel tam genişliğe döner */
@media (max-width: 575.98px) {
  .cart-gorsel-sol,
  .cart-gorsel-sag {
    float: none;
    width: 100% !important;
    margin: 0 0 14px 0;
  }
}

/* ---------------------------------------------------------------------
   Kart grubu, bulunduğu sütunu BOYUNA doldursun.

   Ana sayfada kartın kapsayıcısı (.col-md-8) `display:flex;
   flex-direction:column`. Sütun yönünde çapraz eksen YATAY olduğu için
   align-items:stretch genişliği uzatır, yüksekliği değil — kart içerik
   kadar kalıp yandaki duyuru sütununun altında boşluk bırakıyordu
   (ölçüldü: sütun 416px, kart 333px).

   height:100% yalnızca kapsayıcının yüksekliği belirliyken çözülür;
   normal blok akışında `auto`ya düşer, yani bu kurallar cart grubunun
   başka yerlerdeki kullanımını etkilemez.
   --------------------------------------------------------------------- */
.cart-grup { height: 100%; }
.cart-grup > .row { height: 100%; }

/* Sütunlar flex olunca içlerindeki kart satır yüksekliğine yayılır;
   aynı satırdaki kartlar da birbiriyle eşitlenir. */
.cart-grup > .row > [class*="col-"] { display: flex; }
.cart-grup > .row > [class*="col-"] > * { width: 100%; }