/* ARSIS Moduller tanitim sayfasi - ek stiller (bagimsiz). Hero 2 sutun, 12 renkli ikon,
   entegre-vurgu bolumu. Kartlar .service-card tema stilini kullanir. */

.hero-actions { margin-top: 26px; }

/* Hero: 2 sütun */
.page-hero.pg-hero2 { display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; align-items: center; }
.pg-hero2-visual { display: flex; justify-content: center; }
.pg-hero2-visual img { width: 100%; max-width: 520px; animation: modFloat 6s ease-in-out infinite; }
@keyframes modFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-11px); } }
@media (max-width: 900px) {
  .page-hero.pg-hero2 { grid-template-columns: 1fr; }
  .pg-hero2-visual { order: -1; margin-bottom: 6px; }
  .pg-hero2-visual img { max-width: 440px; }
}
@media (prefers-reduced-motion: reduce) { .pg-hero2-visual img { animation: none; } }

/* Modül kartları - canlı ikonlar */
.mod-grid .service-icon-wrap {
  width: 60px; height: 60px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 20px rgba(10, 34, 64, .16);
  transition: transform .25s ease, box-shadow .25s ease;
}
.mod-grid .service-icon { font-size: 28px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.18)); }
.mod-grid .service-card:hover .service-icon-wrap { transform: translateY(-4px) scale(1.08) rotate(-4deg); box-shadow: 0 14px 28px rgba(10, 34, 64, .24); }
.mod-grid .service-card:nth-child(1)  .service-icon-wrap { background: linear-gradient(135deg, #38BDF8, #0C77B8); }
.mod-grid .service-card:nth-child(2)  .service-icon-wrap { background: linear-gradient(135deg, #34D399, #0EA5A5); }
.mod-grid .service-card:nth-child(3)  .service-icon-wrap { background: linear-gradient(135deg, #FBBF24, #F97316); }
.mod-grid .service-card:nth-child(4)  .service-icon-wrap { background: linear-gradient(135deg, #A78BFA, #7C3AED); }
.mod-grid .service-card:nth-child(5)  .service-icon-wrap { background: linear-gradient(135deg, #F472B6, #DB2777); }
.mod-grid .service-card:nth-child(6)  .service-icon-wrap { background: linear-gradient(135deg, #60A5FA, #2563EB); }
.mod-grid .service-card:nth-child(7)  .service-icon-wrap { background: linear-gradient(135deg, #2DD4BF, #0D9488); }
.mod-grid .service-card:nth-child(8)  .service-icon-wrap { background: linear-gradient(135deg, #FB7185, #E11D48); }
.mod-grid .service-card:nth-child(9)  .service-icon-wrap { background: linear-gradient(135deg, #FCD34D, #D97706); }
.mod-grid .service-card:nth-child(10) .service-icon-wrap { background: linear-gradient(135deg, #818CF8, #4F46E5); }
.mod-grid .service-card:nth-child(11) .service-icon-wrap { background: linear-gradient(135deg, #4ADE80, #16A34A); }
.mod-grid .service-card:nth-child(12) .service-icon-wrap { background: linear-gradient(135deg, #22D3EE, #0891B2); }
@keyframes modUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
.mod-grid .service-card { animation: modUp .5s ease both; }
.mod-grid .service-card:nth-child(n) { animation-delay: calc(.04s * var(--i, 0)); }
@media (prefers-reduced-motion: reduce) { .mod-grid .service-card { animation: none; } }

/* Kart içi bağlantılar */
.mod-grid .service-card a { color: var(--blue-600, #1170B8); font-weight: 700; text-decoration: none; }
.mod-grid .service-card a:hover { text-decoration: underline; }

/* Kart "Detaylı bilgi →" bağlantısı */
.mod-grid .service-card .mod-more {
  display: inline-block; margin-top: 14px;
  font-size: 14.5px; font-weight: 800; letter-spacing: .2px;
  color: var(--blue-600, #1170B8);
}
.mod-grid .service-card .mod-more:hover { transform: translateX(3px); }
.mod-grid .service-card { transition: transform .2s ease, box-shadow .2s ease; }

/* Entegre vurgu bölümü */
.mod-integrated { background: linear-gradient(180deg, rgba(20,150,219,.05), rgba(20,150,219,0)); border-radius: 20px; }
.mod-points {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  max-width: 1180px;
  margin: 0 auto;
}
@media (max-width: 980px) { .mod-points { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .mod-points { grid-template-columns: 1fr; } }
.mod-point {
  background: #FFFFFF;
  border: 1px solid var(--slate-200, #E2E8F0);
  border-radius: 14px;
  padding: 24px 22px;
  box-shadow: 0 8px 22px rgba(10, 34, 64, .08);
  transition: transform .2s ease, box-shadow .2s ease;
}
.mod-point:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(10, 34, 64, .14); }
.mod-point-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 13px;
  background: linear-gradient(135deg, #1496DB, #0C6BA8);
  font-size: 24px; margin-bottom: 14px;
  box-shadow: 0 8px 18px rgba(20, 150, 219, .28);
}
.mod-point h3 { margin: 0 0 8px; font-size: 17px; }
.mod-point p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--slate-600, #475569); }

/* ---- Modül detay sayfası ---- */
/* Hero büyük ikon paneli (görsel yerine) */
.modul-hero-ico {
  width: 240px; height: 240px; border-radius: 40px;
  display: flex; align-items: center; justify-content: center;
  font-size: 120px; line-height: 1;
  background: linear-gradient(135deg, #1496DB, #0C3F66);
  box-shadow: 0 26px 60px rgba(12, 63, 102, .32);
  animation: modFloat 6s ease-in-out infinite;
}
@media (max-width: 900px) { .modul-hero-ico { width: 180px; height: 180px; font-size: 92px; border-radius: 32px; } }
@media (prefers-reduced-motion: reduce) { .modul-hero-ico { animation: none; } }

/* Öne çıkanlar - onay işaretli liste */
.mod-highlights {
  list-style: none; padding: 0; margin: 0 auto;
  max-width: 900px;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 30px;
}
@media (max-width: 640px) { .mod-highlights { grid-template-columns: 1fr; } }
.mod-highlights li {
  position: relative; padding: 4px 0 4px 34px;
  font-size: 15.5px; line-height: 1.5; color: var(--slate-700, #334155); font-weight: 600;
}
.mod-highlights li::before {
  content: "✓"; position: absolute; left: 0; top: 3px;
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #28C840; color: #fff; font-size: 13px; font-weight: 800;
}

/* Modül detay - uygulama ekran görüntüsü */
.modul-shot {
  max-width: 960px; margin: 0 auto;
  background: #fff; border: 1px solid var(--slate-200, #E2E8F0);
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 16px 44px rgba(10, 34, 64, .16);
}
.modul-shot img { display: block; width: 100%; height: auto; }